質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

3754閲覧

reactのcomponentのonClickイベントについて

k-higa

総合スコア20

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/06/18 22:58

react初心者です。
今個人でreact-reduxを使ってwebアプリケーションを作成していますが、ハマってしまいました。

やりたいこと
1 サーバー側からカテゴリの一覧を取得してそれを画面に表示する。
2 ボタンをクリックすると表示されたカテゴリ名を編集できる

という画面を作っているのですが、
カテゴリが複数表示された場合の動きが上手く行っていないです。
例えば

カテゴリA
カテゴリB
というカテゴリがあり、

カテゴリAの編集ボタンをクリックするとカテゴリAのonClickイベントが動いた後に、
カテゴリBのonClickも動いてしまっています。。

カテゴリAのonClickイベントだけを動かしたいのですが、ご教授いただけると助かります。

js

1import Category from "../containers/Category"; 2import React, {Component} from 'react'; 3 4<div className="container"> 5 <h4 className="title">タイトル</h4> 6 const {categoryList} = this.props //サーバー側から取得したカテゴリのリスト 7 { 8 categoryList.map(cate => { 9 return <Category key={cate.id} groupId={cate.id} groupName={cate.name}/> 10 }); 11 } 12</div>

conteiner

js

1import {connect} from 'react-redux'; 2import {Category} from "../components/Category"; 3import * as actions from "../actions/Category"; 4 5 6const mapStateToProps = (state, ownProps) => ({ 7 groupId: ownProps.groupId, 8 groupName: state.Category.groupName === undefined ? ownProps.groupName : state.Category.groupName, 9 isEditingGroupName: state.Category.isEditingGroupName 10}); 11 12 13const mapDispatchToProps = dispatch => ({ 14 editGroupName() { 15 dispatch(actions.editGroupName()); 16 } 17}); 18 19export default connect(mapStateToProps, mapDispatchToProps)(Category); 20

action

js

1export const editingGroupName = (isEdit) => ({ 2 type: 'EDIT_GROUP_NAME', 3 payload: {isEdit} 4}); 5 6export const editGroupName = () => { 7 return (dispatch, getState) => { 8 window.alert("edit group name!!"); 9 dispatch(editingGroupName(true)); 10 } 11}; 12

reducer

js

1const initialState = { 2 groupId: undefined, 3 groupName: undefined, 4 isEditingGroupName: false 5}; 6 7 8export default (state = initialState, action) => { 9 switch (action.type) { 10 case 'EDIT_GROUP_NAME': 11 return { 12 ...state, 13 isEditingGroupName: action.payload.isEdit 14 } 15 default: 16 return state; 17 } 18};

components

js

1import React, {Component} from 'react'; 2 3export class Category extends Component { 4 5 render() { 6 return ( 7 <div> 8 <button className="btn" onClick={() => this.props.editGroupName()}> 9 編集ボタン 10 </button> 11 <h4>{this.props.groupName}</h4> 12 </div> 13 ) 14 } 15} 16 17export default Category;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jun68ykt

2018/06/19 01:31

要望ですが、ご質問に挙がっているソースを GitHub に入れて、回答者が git clone; yarn install; yarn start することで、「カテゴリが複数表示された場合の動きが上手く行っていない」状況をすぐに再現できるようにして頂くことは可能でしょうか?
guest

回答2

0

ベストアンサー

Storeにカテゴリ1つ分のstateしかないのが原因ではないでしょうか?
全てのカテゴリコンポーネントが同じstateを参照して、振舞っている感じです。

カテゴリごとにキー(cate.id)を振って、カテゴリ分のstateを扱えるよう、stateを生成するreducerも追加する必要があると思います。

投稿2018/06/21 00:25

Meganezaru

総合スコア715

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k-higa

2018/06/21 13:04

返事がおそくなってすみません。 おっしゃる通り、onClickイベントが呼ばれているわけではなく、同じstateを参照しているだけでした。 >カテゴリ分のstateを扱えるよう、stateを生成するreducerも追加する必要があると思います。 こちらの具体的なやり方を伺ってもよろしいでしょうか?
Meganezaru

2018/06/22 01:23 編集

以下のような、actionをdispatchして、 ``` {type: 'FETCH_CATEGORIES', payload: CategoryList} // CategoryListは、(container).props.CategoryListと同様のデータ ``` reducerで、 ``` case 'FETCH_CATEGORIES': // lodashのmapkeysを利用するともっとシンプルになりますが・・・ const categoryList = action.payload; const categories = []; Object.keys(categoryList).map((key => { categories[key] = {...initialState, ...categoryList[key]}; }); return categories; ``` EDIT_GROUP_NAMEのactionに、id: cate.id を追加してreducerで、どのidを対象にするか判別する。 ``` case 'EDIT_GROUP_NAME': return {...state, [action.id]: {...state[action.id], isEditingGroupName: action.payload.isEdit}}; ``` ような、感じでどうでしょう? 動作未確認ですので、あしからず(^_^;) 最適なstateの構造は、アプリによってまちまちだと思いますので、あくまで一例として。
Meganezaru

2018/06/22 01:26

コメントはmd効かないんですね(^_^;)
k-higa

2018/06/23 07:34

ありがとうございます! 試してみます!
guest

0

カテゴリAの編集ボタンをクリックするとカテゴリAのonClickイベントが動いた後に、

カテゴリBのonClickも動いてしまっています。。

カテゴリAのonClickイベントだけを動かしたいのですが、ご教授いただけると助かります。

コードを見る限り別のカテゴリコンポーネント onClick が発火するように思えません。
原因を明確にするためにも最後のコードブロックを以下のように編集して試してみてください。
憶測ですが onClick が同時に動作してしまうというより、カテゴリーコンテナーが同じ Redux を購読しているが原因ではないでしょうか。

js

1import React, {Component} from 'react'; 2 3export class Category extends Component { 4 5render() { 6 return ( 7 <div> 8 <button className="btn" onClick={() => { 9 console.log(`${this.props.groupName} was cliked`); // <- 追加 10 this.props.editGroupName() 11 }}> 12 編集ボタン 13 </button> 14 <h4>{this.props.groupName}</h4> 15 </div> 16 ) 17 } 18} 19 20export default Category;

投稿2018/06/19 02:46

og24715

総合スコア832

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k-higa

2018/06/21 13:05

返事がおそくなってすみません。 onClickイベントが呼ばれているわけではなく、同じstateを参照しているだけでした。 どうもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問