前提・実現したいこと
Reactで複数のアイテムを追加したり、削除するサンプルを実現したいです。
例)一つ目のアイテムを追加してクリックした後、もう一度同じアイテムをクリックするとそのアイテムは選ばれなくなる。別のアイテムをクリックすると、既にクリックされているアイテムに続いて追加される。
発生している問題・エラーメッセージ
{items: Array(2), count: 0, selectedItems: Array(1)} count: 0 items: Array(2) 0: {id: 1, name: "React", chosen: true} 1: {id: 2, name: "Redux", chosen: false} length: 2 __proto__: Array(0) selectedItems: Array(2) 0: {id: 1, name: "React", chosen: false, setItemStatus: ƒ} 1: {id: 2, name: "Redux", chosen: false, setItemStatus: ƒ} 2: {id: 2, name: "Redux", chosen: true, setItemStatus: ƒ} length: 3__proto__: Array(0)__proto__: Object
これは両方のアイテムをクリックした後に、2つめのアイテムをもう一回クリックしていますが、また追加されてしまっているみたいです。また、chosenのステータスも逆になっています。
該当のソースコード
◾️Select.js
親コンポーネント
import React, { Component } from 'react'; import ItemList from './common/ItemList'; class Select extends Component { constructor(props) { super(props); this.state = { items: [ { id: 1, name: 'React', chosen: false, }, { id: 2, name: 'Redux', chosen: false, } ], count: 0, // カウント数の状態を追加 selectedItems: [] // 追加したアイテムの情報を追加 }; } onChoose() { this.setState({ count: this.state.count + (this.state.chosen ? -1 : 1), chosen: false }); } setItemStatus(clickItem) { // 該当のitemを取り出す const items = this.state.items.slice(); const item = items[clickItem.id - 1]; // itemの状態を変更 item.chosen = !item.chosen; console.log('this', this.state); console.log('ggggg', clickItem); // selectedItemにclickItemを追加(もしくは排除) const selectedItems = this.state.selectedItems; if( selectedItems.indexOf(clickItem) >= 0) { selectedItems.remove(clickItem) } else { selectedItems.push(clickItem) } this.setState({ items, selectedItems }); } render() { return ( <div className="App"> <h1>SelectItem</h1> <ItemList items={this.state.items} setItemStatus={this.setItemStatus.bind(this)} /> </div> ); } } export default Select;
◾️ItemList.js
中間コンポーネント
JavaScript
1import React, { Component } from 'react'; 2import Item from './Item'; 3 4class ItemList extends Component { 5 6 render() { 7 const items = this.props.items.map( item => 8 <Item 9 key={item.id} 10 {...item} 11 setItemStatus={this.props.setItemStatus} 12 /> 13 ) 14 15 return( 16 <ul> 17 {items} 18 </ul> 19 ); 20 } 21} 22 23export default ItemList
◾️Item.js
子コンポネーント
JavaScript
1import React, { Component } from 'react'; 2 3class Item extends Component { 4 render() { 5 6 const link = this.props.chosen ? 'unselected' : 'selected' 7 return ( 8 <button onClick={this.props.parentMethod}> 9 <span>{this.props.id}</span> 10 <span>{this.props.name}</span> 11 <a href="" onClick={(e) => { 12 e.preventDefault(); 13 this.props.setItemStatus(this.props) 14 }}>{link}</a> 15 </button> 16 ); 17 } 18} 19 20export default Item
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/10 16:59
2018/07/10 17:07
2018/07/11 00:32