回答編集履歴
14
テキスト修正
test
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
ようにすると、
|
|
59
|
+
ようにします。そうすると、
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
13
テキスト修正
test
CHANGED
|
@@ -52,11 +52,11 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
- stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力
|
|
55
|
+
- stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントを一つ以上含む、入れ物(Container Component)と考える
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
ようにすると、
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
12
テキスト修正
test
CHANGED
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
+
については、
|
|
34
|
+
|
|
33
|
-
|
|
35
|
+
- 入力フォームとなる子コンポーネントにstateを持たせずに、
|
|
34
36
|
|
|
35
37
|
- 親コンポーネントのstateに子であるフォームからの入力値を持たせ、
|
|
36
38
|
|
11
テキスト修正
test
CHANGED
|
@@ -30,7 +30,15 @@
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
については、入力フォームとなるコンポーネントにstateを持たせずに、
|
|
33
|
+
については、入力フォームとなる子コンポーネントにstateを持たせずに、
|
|
34
|
+
|
|
35
|
+
- 親コンポーネントのstateに子であるフォームからの入力値を持たせ、
|
|
36
|
+
|
|
37
|
+
- フォームに配置される（<input />や<textarea />などの）入力要素のonChangeハンドラを親のメソッドとして持たせ、子にprops経由で渡す
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
ことで解決できます。
|
|
34
42
|
|
|
35
43
|
|
|
36
44
|
|
10
テキスト修正
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)
|
|
37
|
+
例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)を、stateを持たないFunctional Component にしています。
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
9
テキスト修正
test
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
|
|
121
121
|
|
|
122
122
|
|
|
123
|
-
- [jun68ykt/q167369/blob/master/src/index.js#L5
|
|
123
|
+
- [jun68ykt/q167369/blob/master/src/index.js#L54-L56](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L54-L56)
|
|
124
124
|
|
|
125
125
|
|
|
126
126
|
|
8
テキスト修正
test
CHANGED
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
|
|
101
101
|
|
|
102
102
|
|
|
103
|
-
- [jun68ykt/q167369/blob/master/src/index.js#L6
|
|
103
|
+
- [jun68ykt/q167369/blob/master/src/index.js#L64-L65](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L64-L65)
|
|
104
104
|
|
|
105
105
|
|
|
106
106
|
|
7
テキスト修正
test
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
- stateはなるべく親コンポーネント
|
|
45
|
+
- stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力への反応を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントの入れ物(Container Component)と考える。
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
6
テキスト修正
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)も
|
|
37
|
+
例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)もstateを持たないFunctional Component にしています。
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
5
テキスト修正
test
CHANGED
|
@@ -116,7 +116,11 @@
|
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
|
|
119
|
-
`...`による[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。
|
|
119
|
+
`...`による[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードで、オブジェクトに対して `...`を使って `setState`している部分が以下です。
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
- [jun68ykt/q167369/blob/master/src/index.js#L55-L57](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L55-L57)
|
|
120
124
|
|
|
121
125
|
|
|
122
126
|
|
4
テキスト修正
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
例としては、[ひとつ
|
|
37
|
+
例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)もコンポーネントを持たないFunctional Component にしています。
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
とすればよいです。
|
|
98
98
|
|
|
99
|
-
[ひとつ
|
|
99
|
+
[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードでも、以下にてこれを使っています。
|
|
100
100
|
|
|
101
101
|
|
|
102
102
|
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
|
|
145
145
|
```
|
|
146
146
|
|
|
147
|
-
の考え方だと、[ひとつ
|
|
147
|
+
の考え方だと、[ひとつ後のご質問](https://teratail.com/questions/167369)の App のstate も
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
|
3
テキスト修正
test
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
61
|
-
参考までに、以下は、Presentational ComponentとContainer Component、および Functional ComponentとClass Component の説明として検索上位に出てくる記事です。
|
|
61
|
+
参考までに、以下は、Presentational ComponentとContainer Component、および Functional ComponentとClass Component の説明として検索上位に出てくる記事です。（すでにお読みになっていたら、すみません。）
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
|
2
テキスト修正
test
CHANGED
|
@@ -116,6 +116,10 @@
|
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
|
|
119
|
+
`...`による[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
119
123
|
|
|
120
124
|
|
|
121
125
|
### ［Q.3］stateの初期値はカラの配列にして、formのnameでデータの種類を分けるのが良い？
|
1
テキスト修正
test
CHANGED
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
```javascript
|
|
92
92
|
|
|
93
|
-
this.setState
|
|
93
|
+
this.setState({ tasks: [newTask, ...this.state.tasks] });
|
|
94
94
|
|
|
95
95
|
```
|
|
96
96
|
|
|
@@ -106,11 +106,11 @@
|
|
|
106
106
|
|
|
107
107
|
|
|
108
108
|
|
|
109
|
-
ちなみに末尾に追加であれば、以下
|
|
109
|
+
ちなみに末尾に追加であれば、以下です。
|
|
110
110
|
|
|
111
111
|
```javascript
|
|
112
112
|
|
|
113
|
-
this.setState
|
|
113
|
+
this.setState({ tasks: [...this.state.tasks, newTask] });
|
|
114
114
|
|
|
115
115
|
```
|
|
116
116
|
|