回答編集履歴
3
コード追加
test
CHANGED
|
@@ -314,14 +314,6 @@
|
|
|
314
314
|
|
|
315
315
|
|
|
316
316
|
|
|
317
|
-
App の handleCheck だけで、親のチェックボックスがチェックされたときと、子のチェックボックスがチェックされたときの両方に対応できるようにしたため、若干わかりにくくなってしまったかもしれません。
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
これを、親のチェックボックスがチェックされたとき用のハンドラと、子のチェックボックスがチェックされたとき用のハンドラの二つに分離するのもありかもしれません。
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
317
|
|
|
326
318
|
|
|
327
319
|
### 追記
|
2
コード追加
test
CHANGED
|
@@ -319,3 +319,33 @@
|
|
|
319
319
|
|
|
320
320
|
|
|
321
321
|
これを、親のチェックボックスがチェックされたとき用のハンドラと、子のチェックボックスがチェックされたとき用のハンドラの二つに分離するのもありかもしれません。
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
### 追記
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
上記回答コードの修正案を挙げておきます。Appの`handleCheck`の引数を以下のように修正しました。
|
|
332
|
+
|
|
333
|
+
```diff
|
|
334
|
+
|
|
335
|
+
- (dataIndex, childrenIndexes, checked) => {
|
|
336
|
+
|
|
337
|
+
+ (parentId, childId, checked) => {
|
|
338
|
+
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
- 第一引数を、親要素のインデクスにしていたのを、親要素のidに変更した。
|
|
344
|
+
|
|
345
|
+
|
|
346
|
+
|
|
347
|
+
- 第二引数を子要素のインデクスの配列にしていましたが、配列ではなく子要素のid一個にして、これに`-1` を渡されると、すべての子要素のcheckedを第三引数で渡される値に更新することにした。
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
上記の変更にあわせて全体を見直したものがコレです???? [forkしてそれっぽく動くようにしたもの(修正後)](https://codesandbox.io/s/tera-369178-2-0mx7f?file=/demo.js)
|
1
コード追加
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
（※JSONの配列要素の`state`というプロパティ名は、Reactコンポーネントのstateと混同してしまうため、`children` に変えています。）
|
|
15
|
+
（※JSONの配列要素`"parent_id":"2022"`をひとつ足しています。また、子要素の配列である`state`というプロパティ名は、Reactコンポーネントのstateと混同してしまうため、`children` に変えています。）
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
@@ -74,6 +74,48 @@
|
|
|
74
74
|
|
|
75
75
|
]
|
|
76
76
|
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
{
|
|
80
|
+
|
|
81
|
+
"parent_id":"2022",
|
|
82
|
+
|
|
83
|
+
"children":[
|
|
84
|
+
|
|
85
|
+
{
|
|
86
|
+
|
|
87
|
+
"child_id":"103",
|
|
88
|
+
|
|
89
|
+
"checked":false
|
|
90
|
+
|
|
91
|
+
},
|
|
92
|
+
|
|
93
|
+
{
|
|
94
|
+
|
|
95
|
+
"child_id":"104",
|
|
96
|
+
|
|
97
|
+
"checked":true
|
|
98
|
+
|
|
99
|
+
},
|
|
100
|
+
|
|
101
|
+
{
|
|
102
|
+
|
|
103
|
+
"child_id":"105",
|
|
104
|
+
|
|
105
|
+
"checked":true
|
|
106
|
+
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
{
|
|
110
|
+
|
|
111
|
+
"child_id":"106",
|
|
112
|
+
|
|
113
|
+
"checked":false
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
]
|
|
118
|
+
|
|
77
119
|
}
|
|
78
120
|
|
|
79
121
|
]
|
|
@@ -262,6 +304,10 @@
|
|
|
262
304
|
|
|
263
305
|
|
|
264
306
|
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
265
311
|
```
|
|
266
312
|
|
|
267
313
|
|