回答編集履歴
7
テキスト追加
test
CHANGED
|
@@ -132,6 +132,10 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
+
`handleChange` の修正方法がもう一つあります。
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
135
139
|
`<input >` に `name` 属性を追加して、これで `var1` か `var2` かを判別できるようにすると、 以下のようにも書けます。
|
|
136
140
|
|
|
137
141
|
|
6
テキスト追加
test
CHANGED
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
`<input >` に `name` 属性を追加して、これで `var1` か `var2` かを判別できるようにすると、
|
|
135
|
+
`<input >` に `name` 属性を追加して、これで `var1` か `var2` かを判別できるようにすると、 以下のようにも書けます。
|
|
136
136
|
|
|
137
137
|
|
|
138
138
|
|
5
テキスト追加
test
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
|
|
85
|
-
- `this.state`
|
|
85
|
+
- `this.state`のプロパティとして `result` を持たなくても、`render()`で加算結果を表示できるので、`result`プロパティを削除
|
|
86
86
|
|
|
87
87
|
- `handleChange()`を修正して、変数名の `'var1'` または `'var2'` を受け取り、該当する `this.state`のプロパティを更新するハンドラを返すように修正
|
|
88
88
|
|
4
テキスト追加
test
CHANGED
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
`<input >` に `name` 属性を
|
|
135
|
+
`<input >` に `name` 属性を追加して、これで `var1` か `var2` かを判別できるようにすると、 ご質問のコードにある、`handleChange(event)` のままで、以下のように書けます。
|
|
136
136
|
|
|
137
137
|
|
|
138
138
|
|
3
テキスト追加
test
CHANGED
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
|
|
109
109
|
---
|
|
110
110
|
|
|
111
|
-
**追記**
|
|
111
|
+
**追記1**
|
|
112
112
|
|
|
113
113
|
|
|
114
114
|
|
|
@@ -123,3 +123,47 @@
|
|
|
123
123
|
- `var1` か `var2` に数字でないものが入れられた場合、`計算できません。` と表示します。
|
|
124
124
|
|
|
125
125
|
- `this.state` の `var1` または `var2` が 0 の場合も表示します。
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
**追記2**
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
`<input >` に `name` 属性を付加すると、 ご質問のコードにある、`handleChange(event)` でも以下のように書けます。
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
```javascript
|
|
140
|
+
|
|
141
|
+
handleChange(event) {
|
|
142
|
+
|
|
143
|
+
this.setState({
|
|
144
|
+
|
|
145
|
+
[event.target.name]: event.target.value,
|
|
146
|
+
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
```html
|
|
156
|
+
|
|
157
|
+
var1:<input name="var1" type="text" value={this.state.var1} onChange={this.handleChange} />
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
```html
|
|
162
|
+
|
|
163
|
+
var2:<input name="var2" type="text" value={this.state.var2} onChange={this.handleChange} />
|
|
164
|
+
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
サンプル： [https://jsfiddle.net/jun68ykt/t19bk2ns/1/](https://jsfiddle.net/jun68ykt/t19bk2ns/1/)
|
2
テキスト追加
test
CHANGED
|
@@ -120,4 +120,6 @@
|
|
|
120
120
|
|
|
121
121
|
|
|
122
122
|
|
|
123
|
-
`var1` か `var2` に数字でないものが入れられた場合、`計算できません。` と表示します。
|
|
123
|
+
- `var1` か `var2` に数字でないものが入れられた場合、`計算できません。` と表示します。
|
|
124
|
+
|
|
125
|
+
- `this.state` の `var1` または `var2` が 0 の場合も表示します。
|
1
テキスト追加
test
CHANGED
|
@@ -103,3 +103,21 @@
|
|
|
103
103
|
|
|
104
104
|
|
|
105
105
|
お望みの仕様とは少し違うかもしれませんが、参考になれば幸いです。
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
**追記**
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
上記のコードを、もう少し親切にしたものが以下です。
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
[https://jsfiddle.net/jun68ykt/a7enwo5t/2/](https://jsfiddle.net/jun68ykt/a7enwo5t/2/)
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
`var1` か `var2` に数字でないものが入れられた場合、`計算できません。` と表示します。
|