teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問相談内容を記入した内容を確認画面で表示したい。

編集履歴

質問編集履歴

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
+ ```