回答編集履歴
3
コード追加
answer
CHANGED
|
@@ -156,11 +156,7 @@
|
|
|
156
156
|
```
|
|
157
157
|
|
|
158
158
|
|
|
159
|
-
App の handleCheck だけで、親のチェックボックスがチェックされたときと、子のチェックボックスがチェックされたときの両方に対応できるようにしたため、若干わかりにくくなってしまったかもしれません。
|
|
160
159
|
|
|
161
|
-
これを、親のチェックボックスがチェックされたとき用のハンドラと、子のチェックボックスがチェックされたとき用のハンドラの二つに分離するのもありかもしれません。
|
|
162
|
-
|
|
163
|
-
|
|
164
160
|
### 追記
|
|
165
161
|
|
|
166
162
|
上記回答コードの修正案を挙げておきます。Appの`handleCheck`の引数を以下のように修正しました。
|
2
コード追加
answer
CHANGED
|
@@ -158,4 +158,19 @@
|
|
|
158
158
|
|
|
159
159
|
App の handleCheck だけで、親のチェックボックスがチェックされたときと、子のチェックボックスがチェックされたときの両方に対応できるようにしたため、若干わかりにくくなってしまったかもしれません。
|
|
160
160
|
|
|
161
|
-
これを、親のチェックボックスがチェックされたとき用のハンドラと、子のチェックボックスがチェックされたとき用のハンドラの二つに分離するのもありかもしれません。
|
|
161
|
+
これを、親のチェックボックスがチェックされたとき用のハンドラと、子のチェックボックスがチェックされたとき用のハンドラの二つに分離するのもありかもしれません。
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
### 追記
|
|
165
|
+
|
|
166
|
+
上記回答コードの修正案を挙げておきます。Appの`handleCheck`の引数を以下のように修正しました。
|
|
167
|
+
```diff
|
|
168
|
+
- (dataIndex, childrenIndexes, checked) => {
|
|
169
|
+
+ (parentId, childId, checked) => {
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
- 第一引数を、親要素のインデクスにしていたのを、親要素のidに変更した。
|
|
173
|
+
|
|
174
|
+
- 第二引数を子要素のインデクスの配列にしていましたが、配列ではなく子要素のid一個にして、これに`-1` を渡されると、すべての子要素のcheckedを第三引数で渡される値に更新することにした。
|
|
175
|
+
|
|
176
|
+
上記の変更にあわせて全体を見直したものがコレです???? [forkしてそれっぽく動くようにしたもの(修正後)](https://codesandbox.io/s/tera-369178-2-0mx7f?file=/demo.js)
|
1
コード追加
answer
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
???? [forkしてそれっぽく動くようにしたもの](https://codesandbox.io/s/tera-369178-chrnh?file=/demo.js)
|
|
7
7
|
|
|
8
|
-
（※JSONの配列要素の`state`というプロパティ名は、Reactコンポーネントのstateと混同してしまうため、`children` に変えています。）
|
|
8
|
+
（※JSONの配列要素`"parent_id":"2022"`をひとつ足しています。また、子要素の配列である`state`というプロパティ名は、Reactコンポーネントのstateと混同してしまうため、`children` に変えています。）
|
|
9
9
|
|
|
10
10
|
```jsx
|
|
11
11
|
import * as React from "react";
|
|
@@ -36,6 +36,27 @@
|
|
|
36
36
|
"checked":false
|
|
37
37
|
}
|
|
38
38
|
]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"parent_id":"2022",
|
|
42
|
+
"children":[
|
|
43
|
+
{
|
|
44
|
+
"child_id":"103",
|
|
45
|
+
"checked":false
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"child_id":"104",
|
|
49
|
+
"checked":true
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"child_id":"105",
|
|
53
|
+
"checked":true
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"child_id":"106",
|
|
57
|
+
"checked":false
|
|
58
|
+
}
|
|
59
|
+
]
|
|
39
60
|
}
|
|
40
61
|
]
|
|
41
62
|
}`).value;
|
|
@@ -130,6 +151,8 @@
|
|
|
130
151
|
|
|
131
152
|
export default App;
|
|
132
153
|
|
|
154
|
+
|
|
155
|
+
|
|
133
156
|
```
|
|
134
157
|
|
|
135
158
|
|