質問編集履歴

3

文章訂正

2021/11/17 15:05

投稿

edu
edu

スコア35

test CHANGED
@@ -1 +1 @@
1
- 基本情報力の回答を確認画面で表示したい。
1
+ 相談内容を記した内容を確認画面で表示したい。
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 基本情報入力の回答と相談内容を確認画面で表示したい。
5
+ **相談内容を記入した内容を確認画面 (Content.js / case3) で表示したい。**
6
6
 
7
7
  どのように実装したら良いかわからない状況で、詰まっています。 アドバイスをお願いします。
8
8
 
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- Basic コンポーネントは中で state を扱えていないので、Questionnaire.jsを参考にした。
15
+ Optional コンポーネントは中で state を扱えていないので、Questionnaire.jsを参考にした。
16
16
 
17
17
  また、渡すべき state を React.useState() で作ったり、それを props で渡していないので、
18
18
 
@@ -22,145 +22,67 @@
22
22
 
23
23
 
24
24
 
25
- **Basic.js**
25
+ **Optional。js**
26
26
 
27
27
  ```
28
28
 
29
29
  import React from "react";
30
30
 
31
- import Radio from "@mui/material/Radio";
31
+ import { Grid } from "@mui/material";
32
-
33
- import RadioGroup from "@mui/material/RadioGroup";
32
+
34
-
35
- import FormControlLabel from "@mui/material/FormControlLabel";
36
-
37
- import FormControl from "@mui/material/FormControl";
38
-
39
- import FormLabel from "@mui/material/FormLabel";
40
-
41
- import InputLabel from "@mui/material/InputLabel";
42
-
43
- import Select from "@mui/material/Select";
33
+ import Tooltip from "@mui/material/Tooltip";
34
+
44
-
35
+ import TextField from "@mui/material/TextField";
45
-
46
-
36
+
37
+
38
+
47
- const Basic = ({ basicProfile, setBasicProfile }) => {
39
+ const Optional = ({ request, setRequest }) => {
48
40
 
49
41
  return (
50
42
 
51
- <>
52
-
53
- <div style={{ textAlign: "center" }}>
54
-
55
- <FormControl component="fieldset">
56
-
57
- <FormLabel component="legend">- 性別 -</FormLabel>
58
-
59
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
60
-
61
- <FormControlLabel value="male" control={<Radio />} label="男性" />
62
-
63
- <FormControlLabel value="female" control={<Radio />} label="女性" />
64
-
65
- </RadioGroup>
66
-
67
- </FormControl>
68
-
69
- </div>
70
-
71
- <div style={{ textAlign: "center" }}>
72
-
73
- <FormLabel component="legend">- 生年月日 -</FormLabel>
74
-
75
- <FormControl sx={{ m: 1, minWidth: 120 }}>
76
-
77
- <InputLabel htmlFor="grouped-native-select">year</InputLabel>
78
-
79
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
80
-
81
- <option aria-label="None" value="" />
82
-
83
- <optgroup label="year">
84
-
85
- {Array.from(Array(2020), (_, num) => (
86
-
87
- <option key={num} value={num + 1}>
88
-
89
- {num + 1990}
90
-
91
- </option>
92
-
93
- ))}
94
-
95
- </optgroup>
96
-
97
- </Select>
98
-
99
- </FormControl>
100
-
101
- <FormControl sx={{ m: 1, minWidth: 120 }}>
102
-
103
- <InputLabel htmlFor="grouped-native-select">month</InputLabel>
104
-
105
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
106
-
107
- <option aria-label="None" value="" />
108
-
109
- <optgroup label="month">
110
-
111
- {Array.from(Array(12), (_, num) => (
112
-
113
- <option key={num} value={num + 1}>
114
-
115
- {num + 1}
116
-
117
- </option>
118
-
119
- ))}
120
-
121
- </optgroup>
122
-
123
- </Select>
124
-
125
- </FormControl>
126
-
127
- <FormControl sx={{ m: 1, minWidth: 120 }}>
128
-
129
- <InputLabel htmlFor="grouped-native-select">day</InputLabel>
130
-
131
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
132
-
133
- <option aria-label="None" value="" />
134
-
135
- <optgroup label="day">
136
-
137
- {Array.from(Array(12), (_, num) => (
138
-
139
- <option key={num} value={num + 1}>
140
-
141
- {num + 1}
142
-
143
- </option>
144
-
145
- ))}
146
-
147
- </optgroup>
148
-
149
- </Select>
150
-
151
- </FormControl>
152
-
153
- </div>
154
-
155
- </>
43
+ <div>
44
+
45
+ <Grid container>
46
+
47
+ <Grid sm={2} />
48
+
49
+ <Grid lg={8} sm={8} spacing={10}>
50
+
51
+ <Tooltip title="ご相談内容を記入することができます" placement="top-start" arrow>
52
+
53
+ <TextField
54
+
55
+ label="ご相談内容"
56
+
57
+ fullWidth
58
+
59
+ margin="normal"
60
+
61
+ rows={4}
62
+
63
+ multiline
64
+
65
+ variant="outlined"
66
+
67
+ placeholder="その他ご要望等あれば、ご記入ください"
68
+
69
+
70
+
71
+ />
72
+
73
+ </Tooltip>
74
+
75
+ </Grid>
76
+
77
+ </Grid>
78
+
79
+ </div>
156
80
 
157
81
  );
158
82
 
159
83
  };
160
84
 
161
-
162
-
163
- export default Basic;
85
+ export default Optional;
164
86
 
165
87
  ```
166
88
 

2

文章訂正

2021/11/17 15:05

投稿

edu
edu

スコア35

test CHANGED
@@ -1 +1 @@
1
- " Failed to compile " 改善したい。
1
+ 基本情報入力の回答確認画面で表示したい。
test CHANGED
@@ -2,346 +2,342 @@
2
2
 
3
3
 
4
4
 
5
- **期待する動作**
6
-
7
- Basic.js 質問及び答えた回答をContent.js case3で表示したく、実装をしてたら、下記のエラー表示が出てそれを改善したい
5
+ 基本情報入力の回答と相談内容確認画面で表示したい。
8
-
9
-
10
-
6
+
11
- どのように実装したら良いかわからない状況で、詰まっています。 何方かアドバイスをお願いします。
7
+ どのように実装したら良いかわからない状況で、詰まっています。 アドバイスをお願いします。
8
+
9
+
10
+
11
+ 問題解決のため行なったこと
12
+
13
+
14
+
15
+ Basic コンポーネントは中で state を扱えていないので、Questionnaire.jsを参考にした。
16
+
17
+ また、渡すべき state を React.useState() で作ったり、それを props で渡していないので、
18
+
19
+ 表示する以前に回答の保存ができていないので、Questionnaire.jsを参考にして実装したが、
20
+
21
+ 基本情報入力の回答を確認画面で表示できなかった。
22
+
23
+
24
+
25
+ **Basic.js**
12
26
 
13
27
  ```
14
28
 
15
- Failed to compile
16
-
17
- src/components/Content.js
29
+ import React from "react";
30
+
18
-
31
+ import Radio from "@mui/material/Radio";
32
+
33
+ import RadioGroup from "@mui/material/RadioGroup";
34
+
35
+ import FormControlLabel from "@mui/material/FormControlLabel";
36
+
37
+ import FormControl from "@mui/material/FormControl";
38
+
39
+ import FormLabel from "@mui/material/FormLabel";
40
+
41
+ import InputLabel from "@mui/material/InputLabel";
42
+
43
+ import Select from "@mui/material/Select";
44
+
45
+
46
+
19
- Line 19:39: 'basicProfile' is not defined no-undef
47
+ const Basic = ({ basicProfile, setBasicProfile }) => {
48
+
20
-
49
+ return (
50
+
51
+ <>
52
+
53
+ <div style={{ textAlign: "center" }}>
54
+
55
+ <FormControl component="fieldset">
56
+
21
- Line 19:53: 'setBasicProfile' is not defined no-undef
57
+ <FormLabel component="legend">- 性別 -</FormLabel>
58
+
22
-
59
+ <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
60
+
61
+ <FormControlLabel value="male" control={<Radio />} label="男性" />
62
+
63
+ <FormControlLabel value="female" control={<Radio />} label="女性" />
64
+
65
+ </RadioGroup>
66
+
67
+ </FormControl>
68
+
69
+ </div>
70
+
71
+ <div style={{ textAlign: "center" }}>
72
+
73
+ <FormLabel component="legend">- 生年月日 -</FormLabel>
74
+
75
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
76
+
77
+ <InputLabel htmlFor="grouped-native-select">year</InputLabel>
78
+
79
+ <Select native defaultValue="" id="grouped-native-select" label="Grouping">
80
+
23
- Line 27:35: 'basicProfile' is not defined no-undef
81
+ <option aria-label="None" value="" />
82
+
24
-
83
+ <optgroup label="year">
84
+
85
+ {Array.from(Array(2020), (_, num) => (
86
+
87
+ <option key={num} value={num + 1}>
88
+
89
+ {num + 1990}
90
+
91
+ </option>
92
+
93
+ ))}
94
+
95
+ </optgroup>
96
+
97
+ </Select>
98
+
99
+ </FormControl>
100
+
101
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
102
+
103
+ <InputLabel htmlFor="grouped-native-select">month</InputLabel>
104
+
105
+ <Select native defaultValue="" id="grouped-native-select" label="Grouping">
106
+
25
- Line 27:49: 'setBasicProfile' is not defined no-undef
107
+ <option aria-label="None" value="" />
108
+
109
+ <optgroup label="month">
110
+
111
+ {Array.from(Array(12), (_, num) => (
112
+
113
+ <option key={num} value={num + 1}>
114
+
115
+ {num + 1}
116
+
117
+ </option>
118
+
119
+ ))}
120
+
121
+ </optgroup>
122
+
123
+ </Select>
124
+
125
+ </FormControl>
126
+
127
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
128
+
129
+ <InputLabel htmlFor="grouped-native-select">day</InputLabel>
130
+
131
+ <Select native defaultValue="" id="grouped-native-select" label="Grouping">
132
+
133
+ <option aria-label="None" value="" />
134
+
135
+ <optgroup label="day">
136
+
137
+ {Array.from(Array(12), (_, num) => (
138
+
139
+ <option key={num} value={num + 1}>
140
+
141
+ {num + 1}
142
+
143
+ </option>
144
+
145
+ ))}
146
+
147
+ </optgroup>
148
+
149
+ </Select>
150
+
151
+ </FormControl>
152
+
153
+ </div>
154
+
155
+ </>
156
+
157
+ );
158
+
159
+ };
160
+
161
+
162
+
163
+ export default Basic;
26
164
 
27
165
  ```
28
166
 
29
-
30
-
31
- **Basic.js**
167
+ **Content.js**
168
+
169
+
32
170
 
33
171
  ```
34
172
 
35
173
  import React from "react";
36
174
 
175
+ import { Grid } from "@mui/material";
176
+
177
+ import Stepper from "@mui/material/Stepper";
178
+
37
- import Radio from "@mui/material/Radio";
179
+ import Step from "@mui/material/Step";
38
-
39
- import RadioGroup from "@mui/material/RadioGroup";
180
+
40
-
41
- import FormControlLabel from "@mui/material/FormControlLabel";
42
-
43
- import FormControl from "@mui/material/FormControl";
44
-
45
- import FormLabel from "@mui/material/FormLabel";
181
+ import StepLabel from "@mui/material/StepLabel";
46
-
47
- import InputLabel from "@mui/material/InputLabel";
182
+
48
-
49
- import Select from "@mui/material/Select";
183
+ import Button from "@mui/material/Button";
184
+
50
-
185
+ import Typography from "@mui/material/Typography";
186
+
51
-
187
+ import Basic from "./Basic";
188
+
52
-
189
+ import Questionnaire, { QUESTIONS } from "./Questionnaire";
190
+
191
+ import Optional from "./Optional";
192
+
193
+
194
+
195
+ function getSteps() {
196
+
197
+ return ["お客様の情報を入力して下さい", "以下にお答え下さい", "ご相談下さい", "以下の内容をご確認下さい"];
198
+
199
+ }
200
+
201
+
202
+
53
- const Basic = ({ basicProfile, setBasicProfile }) => {
203
+ const StepContent = ({ stepIndex, basicProps, questionnaireProps, optionalProps }) => {
204
+
205
+ switch (stepIndex) {
206
+
207
+ case 0:
208
+
209
+ return <Basic {...basicProps} />
210
+
211
+ case 1:
212
+
213
+ return <Questionnaire {...questionnaireProps} />;
214
+
215
+ case 2:
216
+
217
+ return <Optional {...optionalProps}/>;
218
+
219
+ case 3:
220
+
221
+ return (
222
+
223
+ <div style={{ textAlign: "center" }}>
224
+
225
+ <Basic {...basicProps} />
226
+
227
+ <Questionnaire {...questionnaireProps} />
228
+
229
+ <Optional {...optionalProps} />
230
+
231
+ </div>
232
+
233
+ );
234
+
235
+ default:
236
+
237
+ return "Unknown stepIndex";
238
+
239
+ }
240
+
241
+ };
242
+
243
+ function Content() {
244
+
245
+ const [activeStep, setActiveStep] = React.useState(0);
246
+
247
+ const [basicProfile, setBasicProfile] = React.useState({ gender: null, year: null, month: null, day: null });
248
+
249
+ const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null));
250
+
251
+ // const [request, setRequest] = React.useState();
252
+
253
+ const steps = getSteps();
254
+
255
+ const handleNext = () => {
256
+
257
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
258
+
259
+ };
260
+
261
+ const handleBack = () => {
262
+
263
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
264
+
265
+ };
266
+
267
+ const handleReset = () => {
268
+
269
+ setActiveStep(0);
270
+
271
+ };
272
+
273
+ const buttonDisabled = activeStep === 1 && answers.some((a) => !a);
54
274
 
55
275
  return (
56
276
 
57
- <>
58
-
59
- <div style={{ textAlign: "center" }}>
60
-
61
- <FormControl component="fieldset">
62
-
63
- <FormLabel component="legend">- 性別 -</FormLabel>
64
-
65
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
66
-
67
- <FormControlLabel value="male" control={<Radio />} label="男性" />
68
-
69
- <FormControlLabel value="female" control={<Radio />} label="女性" />
70
-
71
- </RadioGroup>
72
-
73
- </FormControl>
74
-
75
- </div>
76
-
77
- <div style={{ textAlign: "center" }}>
78
-
79
- <FormLabel component="legend">- 生年月日 -</FormLabel>
80
-
81
- <FormControl sx={{ m: 1, minWidth: 120 }}>
82
-
83
- <InputLabel htmlFor="grouped-native-select">year</InputLabel>
84
-
85
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
86
-
87
- <option aria-label="None" value="" />
88
-
89
- <optgroup label="year">
90
-
91
- {Array.from(Array(2020), (_, num) => (
92
-
93
- <option key={num} value={num + 1}>
94
-
95
- {num + 1990}
96
-
97
- </option>
98
-
99
- ))}
100
-
101
- </optgroup>
102
-
103
- </Select>
104
-
105
- </FormControl>
106
-
107
- <FormControl sx={{ m: 1, minWidth: 120 }}>
108
-
109
- <InputLabel htmlFor="grouped-native-select">month</InputLabel>
110
-
111
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
112
-
113
- <option aria-label="None" value="" />
114
-
115
- <optgroup label="month">
116
-
117
- {Array.from(Array(12), (_, num) => (
118
-
119
- <option key={num} value={num + 1}>
120
-
121
- {num + 1}
122
-
123
- </option>
124
-
125
- ))}
126
-
127
- </optgroup>
128
-
129
- </Select>
130
-
131
- </FormControl>
132
-
133
- <FormControl sx={{ m: 1, minWidth: 120 }}>
134
-
135
- <InputLabel htmlFor="grouped-native-select">day</InputLabel>
136
-
137
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
138
-
139
- <option aria-label="None" value="" />
140
-
141
- <optgroup label="day">
142
-
143
- {Array.from(Array(12), (_, num) => (
144
-
145
- <option key={num} value={num + 1}>
146
-
147
- {num + 1}
148
-
149
- </option>
150
-
151
- ))}
152
-
153
- </optgroup>
154
-
155
- </Select>
156
-
157
- </FormControl>
158
-
159
- </div>
160
-
161
- </>
277
+ <Grid container>
278
+
279
+ <Grid sm={2} />
280
+
281
+ <Grid lg={8} sm={8} spacing={10}>
282
+
283
+ <Stepper activeStep={activeStep} alternativeLabel>
284
+
285
+ {steps.map((label) => (
286
+
287
+ <Step key={label}>
288
+
289
+ <StepLabel>{label}</StepLabel>
290
+
291
+ </Step>
292
+
293
+ ))}
294
+
295
+ </Stepper>
296
+
297
+ {activeStep === steps.length ? (
298
+
299
+ <div style={{ textAlign: "center" }}>
300
+
301
+ <Typography>全ステップの表示を完了</Typography>
302
+
303
+ <Button onClick={handleReset}>リセット</Button>
304
+
305
+ </div>
306
+
307
+ ) : (
308
+
309
+ <div>
310
+
311
+ <Typography>
312
+
313
+ <StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} basicProps={{ basicProfile, setBasicProfile }} />
314
+
315
+ </Typography>
316
+
317
+ <Button disabled={activeStep === 0} onClick={handleBack}>
318
+
319
+ 戻る
320
+
321
+ </Button>
322
+
323
+ <Button variant="contained" color="primary" onClick={handleNext} disabled={buttonDisabled}>
324
+
325
+ {activeStep === steps.length - 1 ? "送信" : "次へ"}
326
+
327
+ </Button>
328
+
329
+ </div>
330
+
331
+ )}
332
+
333
+ </Grid>
334
+
335
+ </Grid>
162
336
 
163
337
  );
164
338
 
165
- };
339
+ }
166
-
167
-
168
-
340
+
169
- export default Basic;
341
+ export default Content;
170
342
 
171
343
  ```
172
-
173
- **Content.js**
174
-
175
-
176
-
177
- ```
178
-
179
- import React from "react";
180
-
181
- import { Grid } from "@mui/material";
182
-
183
- import Stepper from "@mui/material/Stepper";
184
-
185
- import Step from "@mui/material/Step";
186
-
187
- import StepLabel from "@mui/material/StepLabel";
188
-
189
- import Button from "@mui/material/Button";
190
-
191
- import Typography from "@mui/material/Typography";
192
-
193
- import Basic from "./Basic";
194
-
195
- import Questionnaire, { QUESTIONS } from "./Questionnaire";
196
-
197
- import Optional from "./Optional";
198
-
199
-
200
-
201
- function getSteps() {
202
-
203
- return ["お客様の情報を入力して下さい", "以下にお答え下さい", "ご相談下さい", "以下の内容をご確認下さい"];
204
-
205
- }
206
-
207
-
208
-
209
- const StepContent = ({ stepIndex, basicProps, questionnaireProps, optionalProps }) => {
210
-
211
- switch (stepIndex) {
212
-
213
- case 0:
214
-
215
- return <Basic {...basicProps={ basicProfile, setBasicProfile }} />
216
-
217
- case 1:
218
-
219
- return <Questionnaire {...questionnaireProps} />;
220
-
221
- case 2:
222
-
223
- return <Optional {...optionalProps}/>;
224
-
225
- case 3:
226
-
227
- return (
228
-
229
- <div style={{ textAlign: "center" }}>
230
-
231
- <Basic {...basicProps={ basicProfile, setBasicProfile }} />
232
-
233
- <Questionnaire {...questionnaireProps} />
234
-
235
- <Optional {...optionalProps} />
236
-
237
- </div>
238
-
239
- );
240
-
241
- default:
242
-
243
- return "Unknown stepIndex";
244
-
245
- }
246
-
247
- };
248
-
249
- function Content() {
250
-
251
- const [activeStep, setActiveStep] = React.useState(0);
252
-
253
- const [basicProfile, setBasicProfile] = React.useState({ gender: null, year: null, month: null, day: null });
254
-
255
- const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null));
256
-
257
- const steps = getSteps();
258
-
259
- const handleNext = () => {
260
-
261
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
262
-
263
- };
264
-
265
- const handleBack = () => {
266
-
267
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
268
-
269
- };
270
-
271
- const handleReset = () => {
272
-
273
- setActiveStep(0);
274
-
275
- };
276
-
277
- const buttonDisabled = activeStep === 1 && answers.some((a) => !a);
278
-
279
- return (
280
-
281
- <Grid container>
282
-
283
- <Grid sm={2} />
284
-
285
- <Grid lg={8} sm={8} spacing={10}>
286
-
287
- <Stepper activeStep={activeStep} alternativeLabel>
288
-
289
- {steps.map((label) => (
290
-
291
- <Step key={label}>
292
-
293
- <StepLabel>{label}</StepLabel>
294
-
295
- </Step>
296
-
297
- ))}
298
-
299
- </Stepper>
300
-
301
- {activeStep === steps.length ? (
302
-
303
- <div style={{ textAlign: "center" }}>
304
-
305
- <Typography>全ステップの表示を完了</Typography>
306
-
307
- <Button onClick={handleReset}>リセット</Button>
308
-
309
- </div>
310
-
311
- ) : (
312
-
313
- <div>
314
-
315
- <Typography>
316
-
317
- <StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} />
318
-
319
- </Typography>
320
-
321
- <Button disabled={activeStep === 0} onClick={handleBack}>
322
-
323
- 戻る
324
-
325
- </Button>
326
-
327
- <Button variant="contained" color="primary" onClick={handleNext} disabled={buttonDisabled}>
328
-
329
- {activeStep === steps.length - 1 ? "送信" : "次へ"}
330
-
331
- </Button>
332
-
333
- </div>
334
-
335
- )}
336
-
337
- </Grid>
338
-
339
- </Grid>
340
-
341
- );
342
-
343
- }
344
-
345
- export default Content;
346
-
347
- ```

1

文章訂正

2021/11/17 07:50

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -178,138 +178,170 @@
178
178
 
179
179
  import React from "react";
180
180
 
181
+ import { Grid } from "@mui/material";
182
+
183
+ import Stepper from "@mui/material/Stepper";
184
+
181
- import Radio from "@mui/material/Radio";
185
+ import Step from "@mui/material/Step";
182
-
183
- import RadioGroup from "@mui/material/RadioGroup";
186
+
184
-
185
- import FormControlLabel from "@mui/material/FormControlLabel";
186
-
187
- import FormControl from "@mui/material/FormControl";
188
-
189
- import FormLabel from "@mui/material/FormLabel";
187
+ import StepLabel from "@mui/material/StepLabel";
190
-
191
- import InputLabel from "@mui/material/InputLabel";
188
+
192
-
193
- import Select from "@mui/material/Select";
189
+ import Button from "@mui/material/Button";
190
+
194
-
191
+ import Typography from "@mui/material/Typography";
192
+
195
-
193
+ import Basic from "./Basic";
194
+
196
-
195
+ import Questionnaire, { QUESTIONS } from "./Questionnaire";
196
+
197
+ import Optional from "./Optional";
198
+
199
+
200
+
201
+ function getSteps() {
202
+
203
+ return ["お客様の情報を入力して下さい", "以下にお答え下さい", "ご相談下さい", "以下の内容をご確認下さい"];
204
+
205
+ }
206
+
207
+
208
+
209
+ const StepContent = ({ stepIndex, basicProps, questionnaireProps, optionalProps }) => {
210
+
211
+ switch (stepIndex) {
212
+
213
+ case 0:
214
+
215
+ return <Basic {...basicProps={ basicProfile, setBasicProfile }} />
216
+
217
+ case 1:
218
+
219
+ return <Questionnaire {...questionnaireProps} />;
220
+
221
+ case 2:
222
+
223
+ return <Optional {...optionalProps}/>;
224
+
225
+ case 3:
226
+
227
+ return (
228
+
229
+ <div style={{ textAlign: "center" }}>
230
+
197
- const Basic = ({ basicProfile, setBasicProfile }) => {
231
+ <Basic {...basicProps={ basicProfile, setBasicProfile }} />
232
+
233
+ <Questionnaire {...questionnaireProps} />
234
+
235
+ <Optional {...optionalProps} />
236
+
237
+ </div>
238
+
239
+ );
240
+
241
+ default:
242
+
243
+ return "Unknown stepIndex";
244
+
245
+ }
246
+
247
+ };
248
+
249
+ function Content() {
250
+
251
+ const [activeStep, setActiveStep] = React.useState(0);
252
+
253
+ const [basicProfile, setBasicProfile] = React.useState({ gender: null, year: null, month: null, day: null });
254
+
255
+ const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null));
256
+
257
+ const steps = getSteps();
258
+
259
+ const handleNext = () => {
260
+
261
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
262
+
263
+ };
264
+
265
+ const handleBack = () => {
266
+
267
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
268
+
269
+ };
270
+
271
+ const handleReset = () => {
272
+
273
+ setActiveStep(0);
274
+
275
+ };
276
+
277
+ const buttonDisabled = activeStep === 1 && answers.some((a) => !a);
198
278
 
199
279
  return (
200
280
 
201
- <>
202
-
203
- <div style={{ textAlign: "center" }}>
204
-
205
- <FormControl component="fieldset">
206
-
207
- <FormLabel component="legend">- 性別 -</FormLabel>
208
-
209
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
210
-
211
- <FormControlLabel value="male" control={<Radio />} label="男性" />
212
-
213
- <FormControlLabel value="female" control={<Radio />} label="女性" />
214
-
215
- </RadioGroup>
216
-
217
- </FormControl>
218
-
219
- </div>
220
-
221
- <div style={{ textAlign: "center" }}>
222
-
223
- <FormLabel component="legend">- 生年月日 -</FormLabel>
224
-
225
- <FormControl sx={{ m: 1, minWidth: 120 }}>
226
-
227
- <InputLabel htmlFor="grouped-native-select">year</InputLabel>
228
-
229
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
230
-
231
- <option aria-label="None" value="" />
232
-
233
- <optgroup label="year">
234
-
235
- {Array.from(Array(2020), (_, num) => (
236
-
237
- <option key={num} value={num + 1}>
238
-
239
- {num + 1990}
240
-
241
- </option>
242
-
243
- ))}
244
-
245
- </optgroup>
246
-
247
- </Select>
248
-
249
- </FormControl>
250
-
251
- <FormControl sx={{ m: 1, minWidth: 120 }}>
252
-
253
- <InputLabel htmlFor="grouped-native-select">month</InputLabel>
254
-
255
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
256
-
257
- <option aria-label="None" value="" />
258
-
259
- <optgroup label="month">
260
-
261
- {Array.from(Array(12), (_, num) => (
262
-
263
- <option key={num} value={num + 1}>
264
-
265
- {num + 1}
266
-
267
- </option>
268
-
269
- ))}
270
-
271
- </optgroup>
272
-
273
- </Select>
274
-
275
- </FormControl>
276
-
277
- <FormControl sx={{ m: 1, minWidth: 120 }}>
278
-
279
- <InputLabel htmlFor="grouped-native-select">day</InputLabel>
280
-
281
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
282
-
283
- <option aria-label="None" value="" />
284
-
285
- <optgroup label="day">
286
-
287
- {Array.from(Array(12), (_, num) => (
288
-
289
- <option key={num} value={num + 1}>
290
-
291
- {num + 1}
292
-
293
- </option>
294
-
295
- ))}
296
-
297
- </optgroup>
298
-
299
- </Select>
300
-
301
- </FormControl>
302
-
303
- </div>
304
-
305
- </>
281
+ <Grid container>
282
+
283
+ <Grid sm={2} />
284
+
285
+ <Grid lg={8} sm={8} spacing={10}>
286
+
287
+ <Stepper activeStep={activeStep} alternativeLabel>
288
+
289
+ {steps.map((label) => (
290
+
291
+ <Step key={label}>
292
+
293
+ <StepLabel>{label}</StepLabel>
294
+
295
+ </Step>
296
+
297
+ ))}
298
+
299
+ </Stepper>
300
+
301
+ {activeStep === steps.length ? (
302
+
303
+ <div style={{ textAlign: "center" }}>
304
+
305
+ <Typography>全ステップの表示を完了</Typography>
306
+
307
+ <Button onClick={handleReset}>リセット</Button>
308
+
309
+ </div>
310
+
311
+ ) : (
312
+
313
+ <div>
314
+
315
+ <Typography>
316
+
317
+ <StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} />
318
+
319
+ </Typography>
320
+
321
+ <Button disabled={activeStep === 0} onClick={handleBack}>
322
+
323
+ 戻る
324
+
325
+ </Button>
326
+
327
+ <Button variant="contained" color="primary" onClick={handleNext} disabled={buttonDisabled}>
328
+
329
+ {activeStep === steps.length - 1 ? "送信" : "次へ"}
330
+
331
+ </Button>
332
+
333
+ </div>
334
+
335
+ )}
336
+
337
+ </Grid>
338
+
339
+ </Grid>
306
340
 
307
341
  );
308
342
 
309
- };
343
+ }
310
-
311
-
312
-
344
+
313
- export default Basic;
345
+ export default Content;
314
-
346
+
315
- ```
347
+ ```