回答編集履歴

2

テキスト修正

2018/10/15 12:57

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -131,3 +131,61 @@
131
131
 
132
132
 
133
133
  上記により、 `first` の内容としては、`value`だけが更新されており他は変更なしのオブジェクトで setStateされます。
134
+
135
+
136
+
137
+ #### 追記2
138
+
139
+
140
+
141
+ ご質問に挙げられているコードから始めて、意図通り動くようにし、入力値のバリデーションを関数化したものを以下のレポジトリ
142
+
143
+
144
+
145
+ - [https://github.com/jun68ykt/q151995](https://github.com/jun68ykt/q151995)
146
+
147
+
148
+
149
+ に上げましたので、もしよければ git cloneして頂くか、ダウンロードのうえ、内容をご確認ください。
150
+
151
+ 以下、このレポジトリに入れたソースについて説明します。
152
+
153
+
154
+
155
+ (1) [最初のコミット](https://github.com/jun68ykt/q151995/commit/8e57ef6062ccdaa09fdf858bfe3f6cb3238ac819)では、ご質問に挙げられている Register をそのままコピペして Register.js を作成し、これだけを表示する index.js を作成しました。
156
+
157
+
158
+
159
+ (2) 次のコミット、[「一度のsetStateでvalueとstateを更新するように修正」](https://github.com/jun68ykt/q151995/commit/40b3515753c2d1fc54cc6b33f6af6c3cce8c744b)にて、 onChange の中で一度だけsetStateするようにしています。これで、とりあえず意図通り動くようになるかと思います。
160
+
161
+
162
+
163
+ (3) [入力値のバリデーションを関数化](https://github.com/jun68ykt/q151995/commit/d73077b7ece1b69476e8578d7c4c738aecd5da4d) することで、onChange を以下のように短くしました。
164
+
165
+
166
+
167
+ ```javascript
168
+
169
+ onChange = e => {
170
+
171
+ const { name, value } = e.target;
172
+
173
+
174
+
175
+ let status = validate(name, value);
176
+
177
+ if (name === 'password2')
178
+
179
+ status = status && this.state.password.value === value;
180
+
181
+
182
+
183
+ this.setState( { [name]: { value, status } });
184
+
185
+ };
186
+
187
+ ```
188
+
189
+
190
+
191
+ 以上です。

1

テキスト追加

2018/10/15 12:57

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -53,3 +53,81 @@
53
53
 
54
54
 
55
55
  以上参考になれば幸いです。
56
+
57
+
58
+
59
+ #### 追記
60
+
61
+
62
+
63
+ > kazoogon 2018/10/15 12:10
64
+
65
+ 回答ありがとうございます。
66
+
67
+ これは例えばプロパティが10個あったら、setStateする度に10個書かないといけないということ?? になるんですかね??
68
+
69
+
70
+
71
+ 上記に回答します。
72
+
73
+
74
+
75
+ > プロパティが10個あったら
76
+
77
+
78
+
79
+ というのは、this.state の各`currentName` の値であるオブジェクトに10個のプロパティがあり、たとえば
80
+
81
+
82
+
83
+ ```javascript
84
+
85
+
86
+
87
+ this.state = {
88
+
89
+ firstName: {
90
+
91
+ value: '',
92
+
93
+ status: '',
94
+
95
+ prop1: '', prop2: '', prop3: '', prop4: '',
96
+
97
+ prop5: '', prop6: '', prop7: '', prop8: '',
98
+
99
+ }
100
+
101
+ }
102
+
103
+ ```
104
+
105
+
106
+
107
+ というものだった場合、setStateするときに、1個のプロパティは変更するとして、残りの変更したくない9個のプロパティについて、すべて先の回答の `status: this.state[currentName].status` のようなプロパティのコピーを個別に書かなければならないか? というご質問だと思います。(違っていたら、またコメント頂ければと思います)
108
+
109
+
110
+
111
+ 回答としては、その必要はなく、`...`による[スプレッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を使って以下のように書けばよいかと思います。
112
+
113
+
114
+
115
+ ```javascript
116
+
117
+ this.setState({
118
+
119
+ firstName: {
120
+
121
+ ...this.state.firstName,
122
+
123
+ value: currentValue,
124
+
125
+ }
126
+
127
+ });
128
+
129
+ ```
130
+
131
+
132
+
133
+ 上記により、 `first` の内容としては、`value`だけが更新されており他は変更なしのオブジェクトで setStateされます。