teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問[React] formと上手く付き合えない！

編集履歴

回答編集履歴

14

テキスト修正

2019/01/07 03:11

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -27,7 +27,7 @@
27
27
 
28
28
  - stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントを一つ以上含む、入れ物(Container Component)と考える
29
29
 
30
- ようにすると、
30
+ ようにします。そうすると、
31
31
 
32
32
  - 親側のほうに Class Component が集まり、枝葉に行くほど Functional Componentが多くなる(はず）
33
33
 

13

テキスト修正

2019/01/07 03:10

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -25,9 +25,9 @@
25
25
 
26
26
  方針としては、
27
27
 
28
- - stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力への反応を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントの入れ物(Container Component)と考える。
28
+ - stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントを一つ以上含む、入れ物(Container Component)と考える
29
29
 
30
- 上記のようにすると、
30
+ ようにすると、
31
31
 
32
32
  - 親側のほうに Class Component が集まり、枝葉に行くほど Functional Componentが多くなる(はず）
33
33
 

12

テキスト修正

2019/01/07 02:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -14,7 +14,8 @@
14
14
 
15
15
  > form作成のたびにstateを作成してバラけるのは、仕方がないことでしょうか？また、解決方法は、ありますか？
16
16
 
17
+ については、
17
- については、入力フォームとなる子コンポーネントにstateを持たせずに、
18
+ - 入力フォームとなる子コンポーネントにstateを持たせずに、
18
19
  - 親コンポーネントのstateに子であるフォームからの入力値を持たせ、
19
20
  - フォームに配置される（<input />や<textarea />などの）入力要素のonChangeハンドラを親のメソッドとして持たせ、子にprops経由で渡す
20
21
 

11

テキスト修正

2019/01/06 18:33

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -14,8 +14,12 @@
14
14
 
15
15
  > form作成のたびにstateを作成してバラけるのは、仕方がないことでしょうか？また、解決方法は、ありますか？
16
16
 
17
- については、入力フォームとなるコンポーネントにstateを持たせずに、親コンポーネントにフォームからの入力値やonChangeハンドラを持たせることで解決できます。
17
+ については、入力フォームとなる子コンポーネントにstateを持たせずに、
18
+ - 親コンポーネントのstateに子であるフォームからの入力値を持たせ、
19
+ - フォームに配置される（<input />や<textarea />などの）入力要素のonChangeハンドラを親のメソッドとして持たせ、子にprops経由で渡す
18
20
 
21
+ ことで解決できます。
22
+
19
23
  例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)を、stateを持たないFunctional Component にしています。
20
24
 
21
25
  方針としては、

10

テキスト修正

2019/01/06 18:07

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  については、入力フォームとなるコンポーネントにstateを持たせずに、親コンポーネントにフォームからの入力値やonChangeハンドラを持たせることで解決できます。
18
18
 
19
- 例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)もstateを持たないFunctional Component にしています。
19
+ 例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)を、stateを持たないFunctional Component にしています。
20
20
 
21
21
  方針としては、
22
22
 

9

テキスト修正

2019/01/06 18:02

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -59,7 +59,7 @@
59
59
 
60
60
  `...`による[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードで、オブジェクトに対して `...`を使って `setState`している部分が以下です。
61
61
 
62
- - [jun68ykt/q167369/blob/master/src/index.js#L55-L57](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L55-L57)
62
+ - [jun68ykt/q167369/blob/master/src/index.js#L54-L56](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L54-L56)
63
63
 
64
64
 
65
65
  ### ［Q.3］stateの初期値はカラの配列にして、formのnameでデータの種類を分けるのが良い？

8

テキスト修正

2019/01/06 17:30

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -49,7 +49,7 @@
49
49
  とすればよいです。
50
50
  [ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードでも、以下にてこれを使っています。
51
51
 
52
- - [jun68ykt/q167369/blob/master/src/index.js#L65-L66](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L65-L66)
52
+ - [jun68ykt/q167369/blob/master/src/index.js#L64-L65](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L64-L65)
53
53
 
54
54
 
55
55
  ちなみに末尾に追加であれば、以下です。

7

テキスト修正

2019/01/06 17:28

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  方針としては、
22
22
 
23
- - stateはなるべく親コンポーネントにほうに寄せ、子コンポーネントは表示やユーザー入力への反応を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントの入れ物(Container Component)と考える。
23
+ - stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力への反応を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントの入れ物(Container Component)と考える。
24
24
 
25
25
  上記のようにすると、
26
26
 

6

テキスト修正

2019/01/06 16:46

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  については、入力フォームとなるコンポーネントにstateを持たせずに、親コンポーネントにフォームからの入力値やonChangeハンドラを持たせることで解決できます。
18
18
 
19
- 例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)もコンポーネントを持たないFunctional Component にしています。
19
+ 例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)もstateを持たないFunctional Component にしています。
20
20
 
21
21
  方針としては、
22
22
 

5

テキスト修正

2019/01/06 16:45

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -57,9 +57,11 @@
57
57
  this.setState({ tasks: [...this.state.tasks, newTask] });
58
58
  ```
59
59
 
60
- `...`による[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。
60
+ `...`による[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードで、オブジェクトに対して `...`を使って `setState`している部分が以下です。
61
61
 
62
+ - [jun68ykt/q167369/blob/master/src/index.js#L55-L57](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L55-L57)
62
63
 
64
+
63
65
  ### ［Q.3］stateの初期値はカラの配列にして、formのnameでデータの種類を分けるのが良い？
64
66
 
65
67
  空の配列でよいと思います。

4

テキスト修正

2019/01/06 16:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  については、入力フォームとなるコンポーネントにstateを持たせずに、親コンポーネントにフォームからの入力値やonChangeハンドラを持たせることで解決できます。
18
18
 
19
- 例としては、[ひとつ前のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)もコンポーネントを持たないFunctional Component にしています。
19
+ 例としては、[ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答として挙げたコードでは、入力フォームとなる[TodoInput](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L6-L27)もコンポーネントを持たないFunctional Component にしています。
20
20
 
21
21
  方針としては、
22
22
 
@@ -47,7 +47,7 @@
47
47
  this.setState({ tasks: [newTask, ...this.state.tasks] });
48
48
  ```
49
49
  とすればよいです。
50
- [ひとつ前のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードでも、以下にてこれを使っています。
50
+ [ひとつ後のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードでも、以下にてこれを使っています。
51
51
 
52
52
  - [jun68ykt/q167369/blob/master/src/index.js#L65-L66](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L65-L66)
53
53
 
@@ -71,7 +71,7 @@
71
71
  ]
72
72
  }
73
73
  ```
74
- の考え方だと、[ひとつ前のご質問](https://teratail.com/questions/167369)の App のstate も
74
+ の考え方だと、[ひとつ後のご質問](https://teratail.com/questions/167369)の App のstate も
75
75
 
76
76
  ```javascript
77
77
  this.state = {

3

テキスト修正

2019/01/06 16:35

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ということになります。
30
30
 
31
- 参考までに、以下は、Presentational ComponentとContainer Component、および Functional ComponentとClass Component の説明として検索上位に出てくる記事です。
31
+ 参考までに、以下は、Presentational ComponentとContainer Component、および Functional ComponentとClass Component の説明として検索上位に出てくる記事です。（すでにお読みになっていたら、すみません。）
32
32
 
33
33
  - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
34
34
  　　

2

テキスト修正

2019/01/06 16:31

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -57,7 +57,9 @@
57
57
  this.setState({ tasks: [...this.state.tasks, newTask] });
58
58
  ```
59
59
 
60
+ `...`による[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。
60
61
 
62
+
61
63
  ### ［Q.3］stateの初期値はカラの配列にして、formのnameでデータの種類を分けるのが良い？
62
64
 
63
65
  空の配列でよいと思います。

1

テキスト修正

2019/01/06 16:29

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -44,7 +44,7 @@
44
44
  ```
45
45
  があったときに、`this.state.tasks` の先頭に `newTask` を追加した配列で `setState` するには
46
46
  ```javascript
47
- this.setState = { tasks: [newTask, ...this.state.tasks] }
47
+ this.setState({ tasks: [newTask, ...this.state.tasks] });
48
48
  ```
49
49
  とすればよいです。
50
50
  [ひとつ前のご質問](https://teratail.com/questions/167369)に対する私からの回答のコードでも、以下にてこれを使っています。
@@ -52,9 +52,9 @@
52
52
  - [jun68ykt/q167369/blob/master/src/index.js#L65-L66](https://github.com/jun68ykt/q167369/blob/master/src/index.js#L65-L66)
53
53
 
54
54
 
55
- ちなみに末尾に追加であれば、以下のようにします。
55
+ ちなみに末尾に追加であれば、以下です。
56
56
  ```javascript
57
- this.setState = { tasks: [...this.state.tasks, newTask] }
57
+ this.setState({ tasks: [...this.state.tasks, newTask] });
58
58
  ```
59
59
 
60
60