teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

テキスト修正

2018/10/15 12:57

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -64,4 +64,33 @@
64
64
  });
65
65
  ```
66
66
 
67
- 上記により、 `first` の内容としては、`value`だけが更新されており他は変更なしのオブジェクトで setStateされます。
67
+ 上記により、 `first` の内容としては、`value`だけが更新されており他は変更なしのオブジェクトで setStateされます。
68
+
69
+ #### 追記2
70
+
71
+ ご質問に挙げられているコードから始めて、意図通り動くようにし、入力値のバリデーションを関数化したものを以下のレポジトリ
72
+
73
+ - [https://github.com/jun68ykt/q151995](https://github.com/jun68ykt/q151995)
74
+
75
+ に上げましたので、もしよければ git cloneして頂くか、ダウンロードのうえ、内容をご確認ください。
76
+ 以下、このレポジトリに入れたソースについて説明します。
77
+
78
+ (1) [最初のコミット](https://github.com/jun68ykt/q151995/commit/8e57ef6062ccdaa09fdf858bfe3f6cb3238ac819)では、ご質問に挙げられている Register をそのままコピペして Register.js を作成し、これだけを表示する index.js を作成しました。
79
+
80
+ (2) 次のコミット、[「一度のsetStateでvalueとstateを更新するように修正」](https://github.com/jun68ykt/q151995/commit/40b3515753c2d1fc54cc6b33f6af6c3cce8c744b)にて、 onChange の中で一度だけsetStateするようにしています。これで、とりあえず意図通り動くようになるかと思います。
81
+
82
+ (3) [入力値のバリデーションを関数化](https://github.com/jun68ykt/q151995/commit/d73077b7ece1b69476e8578d7c4c738aecd5da4d) することで、onChange を以下のように短くしました。
83
+
84
+ ```javascript
85
+ onChange = e => {
86
+ const { name, value } = e.target;
87
+
88
+ let status = validate(name, value);
89
+ if (name === 'password2')
90
+ status = status && this.state.password.value === value;
91
+
92
+ this.setState( { [name]: { value, status } });
93
+ };
94
+ ```
95
+
96
+ 以上です。

1

テキスト追加

2018/10/15 12:57

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -25,4 +25,43 @@
25
25
 
26
26
  上記の修正では `this.setState`したときに当該`currentName`の `status`プロパティは変わらないようにしています。
27
27
 
28
- 以上参考になれば幸いです。
28
+ 以上参考になれば幸いです。
29
+
30
+ #### 追記
31
+
32
+ > kazoogon 2018/10/15 12:10
33
+ 回答ありがとうございます。
34
+ これは例えばプロパティが10個あったら、setStateする度に10個書かないといけないということ?? になるんですかね??
35
+
36
+ 上記に回答します。
37
+
38
+ > プロパティが10個あったら
39
+
40
+ というのは、this.state の各`currentName` の値であるオブジェクトに10個のプロパティがあり、たとえば
41
+
42
+ ```javascript
43
+
44
+ this.state = {
45
+ firstName: {
46
+ value: '',
47
+ status: '',
48
+ prop1: '', prop2: '', prop3: '', prop4: '',
49
+ prop5: '', prop6: '', prop7: '', prop8: '',
50
+ }
51
+ }
52
+ ```
53
+
54
+ というものだった場合、setStateするときに、1個のプロパティは変更するとして、残りの変更したくない9個のプロパティについて、すべて先の回答の `status: this.state[currentName].status` のようなプロパティのコピーを個別に書かなければならないか? というご質問だと思います。(違っていたら、またコメント頂ければと思います)
55
+
56
+ 回答としては、その必要はなく、`...`による[スプレッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を使って以下のように書けばよいかと思います。
57
+
58
+ ```javascript
59
+ this.setState({
60
+ firstName: {
61
+ ...this.state.firstName,
62
+ value: currentValue,
63
+ }
64
+ });
65
+ ```
66
+
67
+ 上記により、 `first` の内容としては、`value`だけが更新されており他は変更なしのオブジェクトで setStateされます。