回答編集履歴
6
テキスト修正
answer
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
と、代入しようとしているからです。
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
次に、本題の「親コンポーネントのstateを変更したい」についてですが、親のほうで `this.state` を更新するメソッドを作って、それを子コンポーネントに props で渡
|
|
24
|
+
次に、本題の「親コンポーネントのstateを変更したい」についてですが、親のほうで `this.state` を更新するメソッドを作って、それを子コンポーネントに props で渡し、子のほうで、それを使えばよいです。
|
|
25
25
|
|
|
26
26
|
具体例として、以下のようなサンプルを以下に作成しました。
|
|
27
27
|
|
5
テキスト修正
answer
CHANGED
|
@@ -23,17 +23,16 @@
|
|
|
23
23
|
|
|
24
24
|
次に、本題の「親コンポーネントのstateを変更したい」についてですが、親のほうで `this.state` を更新するメソッドを作って、それを子コンポーネントに props で渡せばよいです。
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
具体例として、以下のようなサンプルを以下に作成しました。
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
- 親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更します。
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
|
|
31
|
-
|
|
32
30
|
- `this.state.mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。
|
|
31
|
+
|
|
32
|
+
- `MainIndexBox` は、`App`の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がないため、Functional Component にしています。
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
以下は上記の仕様を実装したコードの一例です。（他にも書き方はあるでしょう。）
|
|
35
35
|
|
|
36
|
-
|
|
37
36
|
### App
|
|
38
37
|
```JSX
|
|
39
38
|
class App extends React.Component {
|
4
テキスト修正
answer
CHANGED
|
@@ -25,8 +25,15 @@
|
|
|
25
25
|
|
|
26
26
|
参考のためサンプルを以下に作成しました。
|
|
27
27
|
|
|
28
|
-
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。
|
|
28
|
+
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。
|
|
29
29
|
|
|
30
|
+
このサンプルでは、
|
|
31
|
+
|
|
32
|
+
- `this.state.mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。
|
|
33
|
+
|
|
34
|
+
- また、`MainIndexBox` は、`App`の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がないため、Functional Component にしています。
|
|
35
|
+
|
|
36
|
+
|
|
30
37
|
### App
|
|
31
38
|
```JSX
|
|
32
39
|
class App extends React.Component {
|
3
テキスト修正
answer
CHANGED
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
Syntax error: "mainIndex" is read-only
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
との、上記
|
|
11
|
+
とのことですが、上記エラーの原因は、以下
|
|
12
12
|
|
|
13
13
|
```javascript
|
|
14
14
|
const mainIndex = this.props.mainIndex
|
|
15
15
|
```
|
|
16
|
-
にて `const` で定義した変数 `mainIndex` に、その２行下で
|
|
16
|
+
にて `const` で定義した変数 `mainIndex` に、その２行下で
|
|
17
17
|
|
|
18
18
|
```javascript
|
|
19
19
|
mainIndex = item.number
|
2
テキスト修正
answer
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
参考のためサンプルを以下に作成しました。
|
|
27
27
|
|
|
28
|
-
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。`mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。また、子である `MainIndexBox` は、親の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がない
|
|
28
|
+
作成したのは、親コンポーネント `App` の `this.state.mainIndex` を、子コンポーネント `MainIndexBox` で表示、変更するというものです。このサンプルでは、 `App`の `this.state.mainIndex`を変えるというテーマにフォーカスするために、`App` は `this.state.items` を持っていません。また、子である `MainIndexBox` は、親の `this.state.mainIndex` を表示、変更するだけなので、`MainIndexBox`自体は state を持つ必要がないことを明示するため、Functional Component にしています。
|
|
29
29
|
|
|
30
30
|
### App
|
|
31
31
|
```JSX
|
1
テキスト修正
answer
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
|
|
66
66
|
以下は、上記のコンポーネントを動かせるようにしたサンプルです。
|
|
67
67
|
|
|
68
|
-
- [https://jsfiddle.net/jun68ykt/xywhvnf6/
|
|
68
|
+
- [https://jsfiddle.net/jun68ykt/xywhvnf6/6/](https://jsfiddle.net/jun68ykt/xywhvnf6/6/)
|
|
69
69
|
|
|
70
70
|
|
|
71
71
|
これは、以下
|