質問編集履歴
1
formではなく、登録ボタンクリック次に呼び出すようにした
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
}())
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
### 該当のソースコード
|
|
18
|
+
### 該当のソースコード（変更前）
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
```react
|
|
@@ -127,7 +127,127 @@
|
|
|
127
127
|
</React.Fragment>
|
|
128
128
|
}
|
|
129
129
|
```
|
|
130
|
+
#変更後(formではなく、変更ボタンクリック次に呼び出すようにした)
|
|
130
131
|
|
|
132
|
+
```react
|
|
133
|
+
function Setting() {
|
|
134
|
+
const [state, setState] = useState({
|
|
135
|
+
name: "",
|
|
136
|
+
old: "",
|
|
137
|
+
weight: "",
|
|
138
|
+
height: "",
|
|
139
|
+
introduction: "",
|
|
140
|
+
fat_percentage: "",
|
|
141
|
+
bmi: "",
|
|
142
|
+
});
|
|
143
|
+
const handleChange = event => {
|
|
144
|
+
console.log(event.target.name)
|
|
145
|
+
setState({ ...state, [event.target.name]: event.target.value });
|
|
146
|
+
}
|
|
147
|
+
function calcBMI() {
|
|
148
|
+
const height_m = state.height / 100;
|
|
149
|
+
var total = parseFloat(state.weight / (height_m * height_m));
|
|
150
|
+
const BMI = Math.round(total);
|
|
151
|
+
const newState = { ...state, bmi: BMI };
|
|
152
|
+
setState(newState);
|
|
153
|
+
console.log(state);
|
|
154
|
+
}
|
|
155
|
+
function handleSubmit() {
|
|
156
|
+
const currentUser = firebase.auth().currentUser;
|
|
157
|
+
calcBMI();
|
|
158
|
+
}
|
|
159
|
+
return (
|
|
160
|
+
<React.Fragment>
|
|
161
|
+
<SchemerAppBar title="Setting" />
|
|
162
|
+
<Container>
|
|
163
|
+
<Button
|
|
164
|
+
color="default"
|
|
165
|
+
variant="contained"
|
|
166
|
+
onClick={() => history.goBack()}
|
|
167
|
+
style={{ marginTop: 20 }}
|
|
168
|
+
>戻る
|
|
169
|
+
</Button>
|
|
170
|
+
<Grid>
|
|
171
|
+
<TextField name="name" width="180" label="名前" value={state.name} onChange={handleChange} style={{ marginRight: 20 }}></TextField>
|
|
172
|
+
<TextField
|
|
173
|
+
width="150"
|
|
174
|
+
label="年齢"
|
|
175
|
+
name="old"
|
|
176
|
+
value={state.old}
|
|
177
|
+
onChange={handleChange}
|
|
178
|
+
InputProps={{
|
|
179
|
+
endAdornment: <InputAdornment position="end">歳</InputAdornment>,
|
|
180
|
+
}}></TextField>
|
|
181
|
+
</Grid>
|
|
182
|
+
<Grid>
|
|
183
|
+
<TextField
|
|
184
|
+
name="height"
|
|
185
|
+
width="100"
|
|
186
|
+
label="身長"
|
|
187
|
+
value={state.height}
|
|
188
|
+
style={{ marginRight: 20 }}
|
|
189
|
+
onChange={handleChange}
|
|
190
|
+
InputProps={{
|
|
191
|
+
endAdornment: <InputAdornment>cm</InputAdornment>,
|
|
192
|
+
}}></TextField>
|
|
193
|
+
<TextField
|
|
194
|
+
width="100"
|
|
195
|
+
label="体重"
|
|
196
|
+
name="weight"
|
|
197
|
+
value={state.weight}
|
|
198
|
+
onChange={handleChange}
|
|
199
|
+
InputProps={{
|
|
200
|
+
endAdornment: <InputAdornment>Kg</InputAdornment>,
|
|
201
|
+
}}
|
|
202
|
+
></TextField>
|
|
203
|
+
<TextField
|
|
204
|
+
width="100"
|
|
205
|
+
label="体脂肪率"
|
|
206
|
+
name="fat_percentage"
|
|
207
|
+
value={state.fat_percentage}
|
|
208
|
+
onChange={handleChange}
|
|
209
|
+
style={{ marginRight: 20, marginLeft: 20 }}
|
|
210
|
+
InputProps={{
|
|
211
|
+
endAdornment: <InputAdornment>%</InputAdornment>,
|
|
212
|
+
}}
|
|
213
|
+
></TextField>
|
|
214
|
+
</Grid>
|
|
215
|
+
<Grid>
|
|
216
|
+
<InputLabel style={{ marginTop: 20 }}>詳細</InputLabel>
|
|
217
|
+
<TextField
|
|
218
|
+
name="introduction"
|
|
219
|
+
width="400"
|
|
220
|
+
multiline rows={4}
|
|
221
|
+
variant="outlined"
|
|
222
|
+
value={state.introduction}
|
|
223
|
+
fullWidth
|
|
224
|
+
onChange={handleChange}
|
|
225
|
+
variant="outlined"
|
|
226
|
+
>
|
|
227
|
+
</TextField>
|
|
228
|
+
</Grid>
|
|
229
|
+
<Grid container justify="space-between">
|
|
230
|
+
<Grid item>
|
|
231
|
+
</Grid>
|
|
232
|
+
<Grid item>
|
|
233
|
+
<Button
|
|
234
|
+
color="primary"
|
|
235
|
+
variant="contained"
|
|
236
|
+
style={{ marginTop: 20 }}
|
|
237
|
+
value="Submit"
|
|
238
|
+
type="submit"
|
|
239
|
+
onClick={handleSubmit}
|
|
240
|
+
>
|
|
241
|
+
登録する</Button>
|
|
242
|
+
</Grid>
|
|
243
|
+
</Grid>
|
|
244
|
+
<LabelBottomNavigation />
|
|
245
|
+
</Container>
|
|
246
|
+
</React.Fragment>
|
|
247
|
+
);
|
|
248
|
+
}
|
|
249
|
+
```
|
|
250
|
+
|
|
131
251
|
### 試したこと
|
|
132
252
|
handleSubmit関数の中でstateのログを出してみたところ、bmi以外はhandleSubmit内でstateが置き換えられていることがわかった。
|
|
133
253
|
即時関数内で、console.log(BMI)をすると、計算された値が表示された。
|