回答編集履歴
6
テキスト修正
test
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
次に、本題の「親コンポーネントのstateを変更したい」についてですが、親のほうで `this.state` を更新するメソッドを作って、それを子コンポーネントに props で渡
|
|
47
|
+
次に、本題の「親コンポーネントのstateを変更したい」についてですが、親のほうで `this.state` を更新するメソッドを作って、それを子コンポーネントに props で渡し、子のほうで、それを使えばよいです。
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
5
テキスト修正
test
CHANGED
|
@@ -48,25 +48,23 @@
|
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
具体例として、以下のようなサンプルを以下に作成しました。
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
|
|
55
|
+
- 親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更します。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
- `this.state.mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
- `MainIndexBox` は、`App`の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がないため、Functional Component にしています。
|
|
56
64
|
|
|
57
65
|
|
|
58
66
|
|
|
59
|
-
このサンプルでは、
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
67
|
+
以下は上記の仕様を実装したコードの一例です。（他にも書き方はあるでしょう。）
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
- また、`MainIndexBox` は、`App`の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がないため、Functional Component にしています。
|
|
68
|
-
|
|
69
|
-
|
|
70
68
|
|
|
71
69
|
|
|
72
70
|
|
4
テキスト修正
test
CHANGED
|
@@ -52,7 +52,21 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。
|
|
55
|
+
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
このサンプルでは、
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
- `this.state.mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
- また、`MainIndexBox` は、`App`の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がないため、Functional Component にしています。
|
|
68
|
+
|
|
69
|
+
|
|
56
70
|
|
|
57
71
|
|
|
58
72
|
|
3
テキスト修正
test
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
との、上記
|
|
21
|
+
とのことですが、上記エラーの原因は、以下
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
にて `const` で定義した変数 `mainIndex` に、その２行下で
|
|
31
|
+
にて `const` で定義した変数 `mainIndex` に、その２行下で
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
2
テキスト修正
test
CHANGED
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。`mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。また、子である `MainIndexBox` は、親の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がない
|
|
55
|
+
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。このサンプルでは、 `App`の `this.state.mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。また、子である `MainIndexBox` は、親の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がないことを明示するため、Functional Component にしています。
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
1
テキスト修正
test
CHANGED
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
- [https://jsfiddle.net/jun68ykt/xywhvnf6/
|
|
135
|
+
- [https://jsfiddle.net/jun68ykt/xywhvnf6/6/](https://jsfiddle.net/jun68ykt/xywhvnf6/6/)
|
|
136
136
|
|
|
137
137
|
|
|
138
138
|
|