og24715 score 800
2018/07/11 02:00 投稿
| 以下の select コンポーネント中に出てくる `selectedItems.remove()` ってなんですか？ |
| selectedItems はただの Array オブジェクトだと思うんですが、`.remove()` メソッドは初めて見ました。 |
| ```js |
| // select class |
| setItemStatus(clickItem) { |
| ... |
| if( selectedItems.indexOf(clickItem) >= 0) { |
| selectedItems.remove(clickItem) // <- これ |
| } else { |
| selectedItems.push(clickItem) |
| } |
| ... |
| } |
| ``` |
| アイテムが選択されたことを表す chosen プロパティと selectedItems が state にいますが、役割被ってて冗長に感じますね。 |
| 選択されたアイテム数を表す count も冗長ですね。 |
| state の count と selectedItems は提示のコードを見る限り使われていないので除去して構わないと想います。必要になれば以下の方法で取れるので。 |
| ```js |
| selectedItems = this.state.items.filter(item => item.chosen); |
| count = this.state.items.filter(item => item.chosen).length + 1; |
| ``` |
| 無駄に複雑にしている気がするので上の問題をまずクリアしてみてください。 |
| 無駄に複雑にしている気がするので上の問題をまずクリアしてみてください。 |
| --- |
| 自分なら以下のようにします。解説が必要でしたらそのように言ってください。 |
| [https://codepen.io/og24715/pen/VBwdEx?editors=0010](https://codepen.io/og24715/pen/VBwdEx?editors=0010) |
| ```js |
| class Select extends React.Component { |
| state = { |
| items: [{ |
| id: 1, |
| name: 'React', |
| chosen: false, |
| }, { |
| id: 2, |
| name: 'Redux', |
| chosen: false, |
| }] |
| } |
| _handleClick = id => event => { |
| const items = [...this.state.items]; |
| const item = this.state.items.find(item => item.id === id); |
| item.chosen = !item.chosen; |
| this.setState({ items }); |
| }; |
| render() { |
| return ( |
| <ItemList |
| items={this.state.items} |
| handleClick={this._handleClick} |
| /> |
| ) |
| } |
| } |
| const ItemList = ({ items, handleClick }) => ( |
| items.map(item => ( |
| <Item |
| key={item.id} |
| item={item} |
| handleClick={handleClick} |
| /> |
| )) |
| ); |
| const Item = ({ item, handleClick }) => ( |
| <button |
| onClick={handleClick(item.id)} |
| > |
| {item.chosen && '✔ '} |
| {item.name} |
| </button> |
| ); |
| ``` |
