回答編集履歴
1
サンプルコードの追加
answer
CHANGED
|
@@ -24,4 +24,61 @@
|
|
|
24
24
|
count = this.state.items.filter(item => item.chosen).length + 1;
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
無駄に複雑にしている気がするので上の問題をまずクリアしてみてください。
|
|
27
|
+
無駄に複雑にしている気がするので上の問題をまずクリアしてみてください。
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
自分なら以下のようにします。解説が必要でしたらそのように言ってください。
|
|
32
|
+
[https://codepen.io/og24715/pen/VBwdEx?editors=0010](https://codepen.io/og24715/pen/VBwdEx?editors=0010)
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
class Select extends React.Component {
|
|
36
|
+
state = {
|
|
37
|
+
items: [{
|
|
38
|
+
id: 1,
|
|
39
|
+
name: 'React',
|
|
40
|
+
chosen: false,
|
|
41
|
+
}, {
|
|
42
|
+
id: 2,
|
|
43
|
+
name: 'Redux',
|
|
44
|
+
chosen: false,
|
|
45
|
+
}]
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
_handleClick = id => event => {
|
|
49
|
+
const items = [...this.state.items];
|
|
50
|
+
const item = this.state.items.find(item => item.id === id);
|
|
51
|
+
item.chosen = !item.chosen;
|
|
52
|
+
|
|
53
|
+
this.setState({ items });
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
render() {
|
|
57
|
+
return (
|
|
58
|
+
<ItemList
|
|
59
|
+
items={this.state.items}
|
|
60
|
+
handleClick={this._handleClick}
|
|
61
|
+
/>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const ItemList = ({ items, handleClick }) => (
|
|
67
|
+
items.map(item => (
|
|
68
|
+
<Item
|
|
69
|
+
key={item.id}
|
|
70
|
+
item={item}
|
|
71
|
+
handleClick={handleClick}
|
|
72
|
+
/>
|
|
73
|
+
))
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
const Item = ({ item, handleClick }) => (
|
|
77
|
+
<button
|
|
78
|
+
onClick={handleClick(item.id)}
|
|
79
|
+
>
|
|
80
|
+
{item.chosen && '✔ '}
|
|
81
|
+
{item.name}
|
|
82
|
+
</button>
|
|
83
|
+
);
|
|
84
|
+
```
|