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;
回答2件
あなたの回答
tips
プレビュー