teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

10

文章訂正

2021/11/07 02:27

投稿

edu
edu

スコア35

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  ReactでMaterial-UIを使用して、Webフォームを作成します。
2
2
  下記のエラーの表示を改善したいです。
3
+ どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。
3
4
 
4
5
  ```
5
6
  Search for the keywords to learn more about each error. 
@@ -17,9 +18,7 @@
17
18
  Line 61:51: 'handleBack' is not defined no-undef
18
19
  ```
19
20
 
20
- どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。
21
21
 
22
-
23
22
  **App.js**
24
23
  ```
25
24
  import { Grid } from "@mui/material";

9

文章訂正

2021/11/07 02:27

投稿

edu
edu

スコア35

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,8 @@
1
1
  ReactでMaterial-UIを使用して、Webフォームを作成します。
2
+ 下記のエラーの表示を改善したいです。
3
+
4
+ ```
2
- **『Search for the keywords to learn more about each error. **
5
+ Search for the keywords to learn more about each error. 
3
6
  src/components/Content.js
4
7
  Line 38:35: 'handleNext' is not defined no-undef
5
8
  Line 40:43: 'handleNext' is not defined no-undef
@@ -11,7 +14,9 @@
11
14
  Line 54:12: 'steps' is not defined no-undef
12
15
  Line 61:27: 'activeStep' is not defined no-undef
13
16
  Line 61:39: 'handleNext' is not defined no-undef
14
- Line 61:51: 'handleBack' is not defined no-undef の表示を改善したいです。**
17
+ Line 61:51: 'handleBack' is not defined no-undef
18
+ ```
19
+
15
20
  どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。
16
21
 
17
22
 
@@ -35,6 +40,7 @@
35
40
  ```
36
41
  **src/components/Content.js**
37
42
 
43
+ ```
38
44
  import React from "react";
39
45
  import { Grid } from "@mui/material";
40
46
  import Stepper from "@mui/material/Stepper";

8

文章訂正

2021/11/06 11:15

投稿

edu
edu

スコア35

title CHANGED
@@ -1,1 +1,1 @@
1
- TypeError: Cannot destructure property '性別' of 'values' as it is undefined. 』を改善したい
1
+ Search for the keywords to learn more about each error. 』を改善したい
body CHANGED
@@ -1,12 +1,22 @@
1
1
  ReactでMaterial-UIを使用して、Webフォームを作成します。
2
+ **『Search for the keywords to learn more about each error.』 **
3
+ src/components/Content.js
4
+ Line 38:35: 'handleNext' is not defined no-undef
5
+ Line 40:43: 'handleNext' is not defined no-undef
6
+ Line 40:67: 'handleBack' is not defined no-undef
7
+ Line 42:38: 'handleNext' is not defined no-undef
8
+ Line 42:62: 'handleBack' is not defined no-undef
9
+ Line 44:37: 'handleBack' is not defined no-undef
10
+ Line 53:30: 'activeStep' is not defined no-undef
11
+ Line 54:12: 'steps' is not defined no-undef
12
+ Line 61:27: 'activeStep' is not defined no-undef
13
+ Line 61:39: 'handleNext' is not defined no-undef
2
- **『TypeError: Cannot destructure property '性別' of 'values' as it is undefined.』 src/components/Confirm.js:4の表示を改善したいです。**
14
+ Line 61:51: 'handleBack' is not defined no-undef の表示を改善したいです。**
3
15
  どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。
4
- **期待する動作**
5
- Basics.js、Question.js、Optional.jsでの回答結果をConfirm.jsで表示したい。
6
16
 
17
+
7
18
  **App.js**
8
19
  ```
9
- import "./App.css";
10
20
  import { Grid } from "@mui/material";
11
21
  import Header from "./components/Header";
12
22
  import Content from "./components/Content";
@@ -23,140 +33,44 @@
23
33
  }
24
34
  export default App;
25
35
  ```
26
- **src / components / Basics.js**
36
+ **src/components/Content.js**
27
- ```
28
- import React from "react";
29
- import Radio from "@mui/material/Radio";
30
- import RadioGroup from "@mui/material/RadioGroup";
31
- import FormControlLabel from "@mui/material/FormControlLabel";
32
- import FormControl from "@mui/material/FormControl";
33
- import FormLabel from "@mui/material/FormLabel";
34
- import InputLabel from "@mui/material/InputLabel";
35
- import Select from "@mui/material/Select";
36
37
 
37
- const Basic = () => {
38
- return (
39
- <>
40
- <div style={{ textAlign: "center" }}>
41
- <FormControl component="fieldset">
42
- <FormLabel component="legend">- 性別 -</FormLabel>
43
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
44
- <FormControlLabel value="male" control={<Radio />} label="男性" />
45
- <FormControlLabel value="female" control={<Radio />} label="女性" />
46
- </RadioGroup>
47
- </FormControl>
48
- </div>
49
- <div style={{ textAlign: "center" }}>
50
- <FormLabel component="legend">- 生年月日 -</FormLabel>
51
- <FormControl sx={{ m: 1, minWidth: 120 }}>
52
- <InputLabel htmlFor="grouped-native-select">year</InputLabel>
53
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
54
- <option aria-label="None" value="" />
55
- <optgroup label="year">
56
- {Array.from(Array(2020), (_, num) => (
57
- <option key={num} value={num + 1}>
58
- {num + 1990}
59
- </option>
60
- ))}
61
- </optgroup>
62
- </Select>
63
- </FormControl>
64
- <FormControl sx={{ m: 1, minWidth: 120 }}>
65
- <InputLabel htmlFor="grouped-native-select">month</InputLabel>
66
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
67
- <option aria-label="None" value="" />
68
- <optgroup label="month">
69
- {Array.from(Array(12), (_, num) => (
70
- <option key={num} value={num + 1}>
71
- {num + 1}
72
- </option>
73
- ))}
74
- </optgroup>
75
- </Select>
76
- </FormControl>
77
- <FormControl sx={{ m: 1, minWidth: 120 }}>
78
- <InputLabel htmlFor="grouped-native-select">day</InputLabel>
79
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
80
- <option aria-label="None" value="" />
81
- <optgroup label="day">
82
- {Array.from(Array(12), (_, num) => (
83
- <option key={num} value={num + 1}>
84
- {num + 1}
85
- </option>
86
- ))}
87
- </optgroup>
88
- </Select>
89
- </FormControl>
90
- </div>
91
- </>
92
- );
93
- };
94
- export default Basic;
95
- ```
96
- **src / components / Confirm.js**
97
- ```
98
38
  import React from "react";
99
-
100
- const Confirm = () => {
101
- return (
102
- //I want to display the results of the answers to Basics.js, Questionnaire.js, and Optional.js in and Optional.js are displayed.
103
-
104
- <div style={{ textAlign: "center" }}>
105
- <p>性別: {性別} </p>
106
- <p>生年月日: {生年月日}</p>
107
- <p>QUESTIONS: {QUESTIONS}</p>
108
- <p>ご相談内容: {ご相談内容} </p>
109
- </div>
110
- );
111
- };
112
- export default Confirm;
113
- ```
114
- **src / components / contents.js**
115
- ```
116
- import React from "react";
117
39
  import { Grid } from "@mui/material";
118
40
  import Stepper from "@mui/material/Stepper";
119
41
  import Step from "@mui/material/Step";
120
42
  import StepLabel from "@mui/material/StepLabel";
121
- import Button from "@mui/material/Button";
122
- import Typography from "@mui/material/Typography";
123
43
  import Basic from "./Basic";
124
- import Questionnaire, { QUESTIONS } from "./Questionnaire";
44
+ import Questionnaire from "./Questionnaire";
125
45
  import Optional from "./Optional";
126
46
  import Confirm from "./Confirm";
127
47
 
128
- function getSteps() {
48
+ export const UserInputData = React.createContext();
129
- return ["お客様の情報を入力して下さい", "以下にお答え下さい", "ご相談下さい", "以下の内容をご確認下さい"];
130
- }
131
49
 
132
- const StepContent = ({ stepIndex, questionnaireProps }) => {
133
- switch (stepIndex) {
134
- case 0:
135
- return <Basic />;
136
- case 1:
137
- return <Questionnaire {...questionnaireProps} />;
138
- case 2:
139
- return <Optional />;
140
- case 3:
141
- return <Confirm />;
142
- default:
143
- return "Unknown stepIndex";
144
- }
145
- };
146
50
  function Content() {
147
- const [activeStep, setActiveStep] = React.useState(0);
51
+ const [currentState, setCurrentState] = React.useState({});
148
- const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null));
149
- const steps = getSteps();
150
- const handleNext = () => {
52
+ const value = {
53
+ currentState,
151
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
54
+ setCurrentState,
152
55
  };
153
- const handleBack = () => {
56
+ function getSteps() {
154
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
57
+ return ["お客様の情報を入力してください", "以下にお答えください", "ご相談ください", "以下の内容をご確認ください"];
155
- };
58
+ }
59
+
156
- const handleReset = () => {
60
+ function getStepContent(stepIndex) {
157
- setActiveStep(0);
61
+ switch (stepIndex) {
62
+ case 0:
63
+ return <Basic handleNext={handleNext} />;
64
+ case 1:
65
+ return <Questionnaire handleNext={handleNext} handleBack={handleBack} />;
66
+ case 2:
67
+ return <Optional handleNext={handleNext} handleBack={handleBack} />;
68
+ case 3:
69
+ return <Confirm handleBack={handleBack} />;
70
+ default:
71
+ return "Unknown stepIndex";
158
- };
72
+ }
159
- const buttonDisabled = activeStep === 1 && answers.some((a) => !a);
73
+ }
160
74
  return (
161
75
  <Grid container>
162
76
  <Grid sm={2} />
@@ -168,108 +82,13 @@
168
82
  </Step>
169
83
  ))}
170
84
  </Stepper>
171
- {activeStep === steps.length ? (
172
- <div>
173
- <Typography>全ステップの表示を完了</Typography>
85
+ <UserInputData.Provider value={value}>
174
- <Button onClick={handleReset}>リセット</Button>
175
- </div>
176
- ) : (
177
- <div>
178
- <Typography>
179
- <StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} />
180
- </Typography>
181
- <Button disabled={activeStep === 0} onClick={handleBack}>
86
+ {getStepContent(activeStep, handleNext, handleBack)}
182
- 戻る
183
- </Button>
87
+ </UserInputData.Provider>
184
- <Button variant="contained" color="primary" onClick={handleNext} disabled={buttonDisabled}>
185
- {activeStep === steps.length - 1 ? "送信" : "次へ"}
186
- </Button>
187
- </div>
188
- )}
189
88
  </Grid>
190
89
  </Grid>
191
90
  );
192
91
  }
92
+
193
93
  export default Content;
194
- ```
195
- **src / components / Optional.js**
196
- ```
197
- import React from "react";
198
- import { Grid } from "@mui/material";
199
- import Tooltip from "@mui/material/Tooltip";
200
- import TextField from "@mui/material/TextField";
201
-
202
- const Optional = () => {
203
- return (
204
- <div>
205
- <Grid container>
206
- <Grid sm={2} />
207
- <Grid lg={8} sm={8} spacing={10}>
208
- <Tooltip title="ご相談内容を記入することができます" placement="top-start" arrow>
209
- <TextField
210
- label="ご相談内容"
211
- fullWidth
212
- margin="normal"
213
- rows={4}
214
- multiline
215
- variant="outlined"
216
- placeholder="その他ご要望等あれば、ご記入ください"
217
- />
218
- </Tooltip>
219
- </Grid>
220
- </Grid>
221
- </div>
222
- );
223
- };
224
- export default Optional;
225
- ```
226
- **src / components / Questionnaire.js**
227
- ```
228
- import React from "react";
229
- import Typography from "@mui/material/Typography";
230
- import Radio from "@mui/material/Radio";
231
- import RadioGroup from "@mui/material/RadioGroup";
232
- import FormControlLabel from "@mui/material/FormControlLabel";
233
- import FormControl from "@mui/material/FormControl";
234
- import FormLabel from "@mui/material/FormLabel";
235
-
236
- export const QUESTIONS = [
237
- "現在、生命保険に加入されていますか?",
238
- "現在、入院中ですか。また、3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことがありますか?",
239
- "過去、5年以内に病気やケガで手術を受けたことまたは継続して7日以上の入院をしたことはありますか?",
240
- ];
241
-
242
- const Questionnaire = ({ answers, setAnswers }) => {
243
- const handleAnswer = (answeredIndex, answer) => {
244
- setAnswers(answers.map((e, i) => (i === answeredIndex ? answer : e)));
245
- };
246
- return (
247
- <div>
248
- <FormControl component="fieldset">
249
- {answers
250
- .filter((_, i) => i === 0 || answers[i - 1])
251
- .map((answer, i) => (
252
- <React.Fragment key={i}>
253
- <FormLabel component="legend">{QUESTIONS[i]}</FormLabel>
254
- {answer ? (
255
- <Typography>{answer === "yes" ? "はい" : "いいえ"}</Typography>
256
- ) : (
257
- <RadioGroup
258
- row
259
- aria-label="gender"
260
- name="row-radio-buttons-group"
261
- onChange={(_evt, value) => {handleAnswer(i, value);
262
- }}
263
- >
264
- <FormControlLabel value="yes" control={<Radio />} label="はい" />
265
- <FormControlLabel value="no" control={<Radio />} label="いいえ" />
266
- </RadioGroup>
267
- )}
268
- </React.Fragment>
269
- ))}
270
- </FormControl>
271
- </div>
272
- );
273
- };
274
- export default Questionnaire;
275
94
  ```

7

文章訂正

2021/11/06 11:09

投稿

edu
edu

スコア35

title CHANGED
@@ -1,1 +1,1 @@
1
- Basics.js、Question.js、Optional.jsでの回答結果を Confirm.js で表示したい
1
+ 『TypeError: Cannot destructure property '性別' of 'values' as it is undefined. 』を改善したい
body CHANGED
@@ -1,9 +1,8 @@
1
1
  ReactでMaterial-UIを使用して、Webフォームを作成します。
2
- **Basics.js、Question.js、Optional.jsで回答した結果をConfirm.js表示したいです。**
2
+ **『TypeError: Cannot destructure property '性別' of 'values' as it is undefined.』 src/components/Confirm.js:4の表示を改善したいです。**
3
3
  どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。
4
- **問題解決のために行ったこと**
4
+ **期待する動作**
5
- useContextを利用してConfirm.jsを実装し確認画面基本情報と質問に対する回答を表示させましたが、
5
+ Basics.jsQuestion.js、Optional.js回答結果Confirm.jsで表示したい。
6
- エラーが発生するので、他の実装方法があれば教えていただきたいです。
7
6
 
8
7
  **App.js**
9
8
  ```
@@ -99,17 +98,16 @@
99
98
  import React from "react";
100
99
 
101
100
  const Confirm = () => {
102
- return <div style={{ textAlign: "center" }}>
101
+ return (
103
102
  //I want to display the results of the answers to Basics.js, Questionnaire.js, and Optional.js in and Optional.js are displayed.
104
103
 
105
104
  <div style={{ textAlign: "center" }}>
106
- <ListGroup style={{ maxWidth: "600px", margin: "auto" }}>
107
- <ListGroup.Item>性別: {性別} </ListGroup.Item>
105
+ <p>性別: {性別} </p>
108
- <ListGroup.Item>生年月日: {生年月日}</ListGroup.Item>
106
+ <p>生年月日: {生年月日}</p>
109
- <ListGroup.Item>QUESTIONS: {QUESTIONS}</ListGroup.Item>
107
+ <p>QUESTIONS: {QUESTIONS}</p>
110
- <ListGroup.Item>ご相談内容: {ご相談内容} </ListGroup.Item>
108
+ <p>ご相談内容: {ご相談内容} </p>
111
- </ListGroup>
112
- </div>;
109
+ </div>
110
+ );
113
111
  };
114
112
  export default Confirm;
115
113
  ```

6

文章訂正

2021/11/06 00:41

投稿

edu
edu

スコア35

title CHANGED
File without changes
body CHANGED
@@ -101,6 +101,14 @@
101
101
  const Confirm = () => {
102
102
  return <div style={{ textAlign: "center" }}>
103
103
  //I want to display the results of the answers to Basics.js, Questionnaire.js, and Optional.js in and Optional.js are displayed.
104
+
105
+ <div style={{ textAlign: "center" }}>
106
+ <ListGroup style={{ maxWidth: "600px", margin: "auto" }}>
107
+ <ListGroup.Item>性別: {性別} </ListGroup.Item>
108
+ <ListGroup.Item>生年月日: {生年月日}</ListGroup.Item>
109
+ <ListGroup.Item>QUESTIONS: {QUESTIONS}</ListGroup.Item>
110
+ <ListGroup.Item>ご相談内容: {ご相談内容} </ListGroup.Item>
111
+ </ListGroup>
104
112
  </div>;
105
113
  };
106
114
  export default Confirm;

5

文章訂正

2021/11/05 15:21

投稿

edu
edu

スコア35

title CHANGED
@@ -1,1 +1,1 @@
1
- 【React】質問の回答を確認画面に表示させたい
1
+ Basics.js、Question.js、Optional.jsでの回答結果 Confirm.js で表示たい
body CHANGED
@@ -1,37 +1,11 @@
1
- ReactでMaterial-UI を使用して、Web フォームを作成しています。
1
+ ReactでMaterial-UIを使用して、Webフォームを作成します。
2
+ **Basics.js、Question.js、Optional.jsで回答した結果をConfirm.jsで表示したいです。**
3
+ どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。
4
+ **問題解決のために行ったこと**
5
+ useContextを利用して、Confirm.jsを実装し、確認画面で基本情報と質問に対する回答を表示させましたが、
6
+ エラーが発生するので、他の実装方法があれば教えていただきたいです。
2
7
 
3
- **components / Content.js の case 3: 以下に、質問の回答を表示させる確認画面を作成したいです。**
4
-
5
- 色々調べたのですが、どのように実装したら良いかわからない状況で、詰まっています。
6
- 何方かアドバイスをお願いします。
7
-
8
- **期待する動作**
9
- components / Content.js の case 3: 以下に、質問の回答を表示させる確認画面を作成したいです。**
10
-
11
-
12
- **問題解決のため行ったこと**
13
- Web フォームなどの記事を検索したが、
14
- classコンポーネントで書いてある記事が多く、
15
- 色々試したがうまく連動できなかった。
16
-
17
- **index.js**
18
- ```
19
- import React from 'react';
20
- import ReactDOM from 'react-dom';
21
- import './index.css';
22
- import App from './App';
23
- import reportWebVitals from './reportWebVitals';
24
-
25
- ReactDOM.render(
26
- <React.StrictMode>
27
- <App />
28
- </React.StrictMode>,
29
- document.getElementById('root')
30
- );
31
- reportWebVitals();
32
- ```
33
8
  **App.js**
34
-
35
9
  ```
36
10
  import "./App.css";
37
11
  import { Grid } from "@mui/material";
@@ -50,10 +24,89 @@
50
24
  }
51
25
  export default App;
52
26
  ```
27
+ **src / components / Basics.js**
28
+ ```
29
+ import React from "react";
30
+ import Radio from "@mui/material/Radio";
31
+ import RadioGroup from "@mui/material/RadioGroup";
32
+ import FormControlLabel from "@mui/material/FormControlLabel";
33
+ import FormControl from "@mui/material/FormControl";
34
+ import FormLabel from "@mui/material/FormLabel";
35
+ import InputLabel from "@mui/material/InputLabel";
36
+ import Select from "@mui/material/Select";
53
37
 
38
+ const Basic = () => {
39
+ return (
40
+ <>
41
+ <div style={{ textAlign: "center" }}>
42
+ <FormControl component="fieldset">
43
+ <FormLabel component="legend">- 性別 -</FormLabel>
44
+ <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
45
+ <FormControlLabel value="male" control={<Radio />} label="男性" />
46
+ <FormControlLabel value="female" control={<Radio />} label="女性" />
47
+ </RadioGroup>
48
+ </FormControl>
49
+ </div>
50
+ <div style={{ textAlign: "center" }}>
51
+ <FormLabel component="legend">- 生年月日 -</FormLabel>
52
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
53
+ <InputLabel htmlFor="grouped-native-select">year</InputLabel>
54
+ <Select native defaultValue="" id="grouped-native-select" label="Grouping">
55
+ <option aria-label="None" value="" />
56
+ <optgroup label="year">
57
+ {Array.from(Array(2020), (_, num) => (
58
+ <option key={num} value={num + 1}>
59
+ {num + 1990}
60
+ </option>
61
+ ))}
62
+ </optgroup>
63
+ </Select>
64
+ </FormControl>
65
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
66
+ <InputLabel htmlFor="grouped-native-select">month</InputLabel>
67
+ <Select native defaultValue="" id="grouped-native-select" label="Grouping">
68
+ <option aria-label="None" value="" />
69
+ <optgroup label="month">
70
+ {Array.from(Array(12), (_, num) => (
71
+ <option key={num} value={num + 1}>
72
+ {num + 1}
73
+ </option>
74
+ ))}
75
+ </optgroup>
76
+ </Select>
77
+ </FormControl>
78
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
79
+ <InputLabel htmlFor="grouped-native-select">day</InputLabel>
80
+ <Select native defaultValue="" id="grouped-native-select" label="Grouping">
81
+ <option aria-label="None" value="" />
82
+ <optgroup label="day">
83
+ {Array.from(Array(12), (_, num) => (
84
+ <option key={num} value={num + 1}>
85
+ {num + 1}
86
+ </option>
87
+ ))}
88
+ </optgroup>
89
+ </Select>
90
+ </FormControl>
91
+ </div>
92
+ </>
93
+ );
94
+ };
95
+ export default Basic;
96
+ ```
54
- **src / components / contents.js**
97
+ **src / components / Confirm.js**
98
+ ```
99
+ import React from "react";
55
100
 
101
+ const Confirm = () => {
102
+ return <div style={{ textAlign: "center" }}>
103
+ //I want to display the results of the answers to Basics.js, Questionnaire.js, and Optional.js in and Optional.js are displayed.
104
+ </div>;
105
+ };
106
+ export default Confirm;
56
107
  ```
108
+ **src / components / contents.js**
109
+ ```
57
110
  import React from "react";
58
111
  import { Grid } from "@mui/material";
59
112
  import Stepper from "@mui/material/Stepper";
@@ -61,163 +114,32 @@
61
114
  import StepLabel from "@mui/material/StepLabel";
62
115
  import Button from "@mui/material/Button";
63
116
  import Typography from "@mui/material/Typography";
64
- import Radio from "@mui/material/Radio";
117
+ import Basic from "./Basic";
65
- import RadioGroup from "@mui/material/RadioGroup";
66
- import FormControlLabel from "@mui/material/FormControlLabel";
67
- import FormControl from "@mui/material/FormControl";
68
- import FormLabel from "@mui/material/FormLabel";
69
- import Tooltip from "@mui/material/Tooltip";
70
- import TextField from "@mui/material/TextField";
118
+ import Questionnaire, { QUESTIONS } from "./Questionnaire";
71
- import InputLabel from "@mui/material/InputLabel";
119
+ import Optional from "./Optional";
72
- import Select from "@mui/material/Select";
120
+ import Confirm from "./Confirm";
73
121
 
74
122
  function getSteps() {
75
- return ["お客様の情報を入力してください", "以下にお答えください", "ご相談ください", "以下の内容をご確認ください"];
123
+ return ["お客様の情報を入力してさい", "以下にお答えさい", "ご相談さい", "以下の内容をご確認さい"];
76
124
  }
77
125
 
78
- function getStepContent(stepIndex) {
126
+ const StepContent = ({ stepIndex, questionnaireProps }) => {
79
127
  switch (stepIndex) {
80
128
  case 0:
81
- return (
82
- <>
83
- {/* <DatePicker views={["year"]} label="Year only" value={selectedDate} onChange={handleDateChange} /> */}
84
- <div>
85
- <FormControl component="fieldset">
86
- <FormLabel component="legend">- 性別 -</FormLabel>
87
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
88
- <FormControlLabel value="male" control={<Radio />} label="男性" />
89
- <FormControlLabel value="female" control={<Radio />} label="女性" />
90
- </RadioGroup>
91
- </FormControl>
92
- </div>
93
- <div>
94
- <FormLabel component="legend">- 生年月日 -</FormLabel>
95
- <FormControl sx={{ m: 1, minWidth: 120 }}>
96
- <InputLabel htmlFor="grouped-native-select">year</InputLabel>
97
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
98
- <option aria-label="None" value="" />
99
- <optgroup label="year">
100
- {Array.from(Array(2020), (_, num) => (
101
- <option key={num} value={num + 1}>
102
- {num + 1990}
103
- </option>
104
- ))}
105
- </optgroup>
106
- </Select>
107
- </FormControl>
108
- <FormControl sx={{ m: 1, minWidth: 120 }}>
109
- <InputLabel htmlFor="grouped-native-select">month</InputLabel>
110
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
111
- <option aria-label="None" value="" />
112
- <optgroup label="month">
113
- {Array.from(Array(12), (_, num) => (
114
- <option key={num} value={num + 1}>
115
- {num + 1}
116
- </option>
117
- ))}
118
- </optgroup>
119
- </Select>
120
- </FormControl>
121
- <FormControl sx={{ m: 1, minWidth: 120 }}>
122
- <InputLabel htmlFor="grouped-native-select">day</InputLabel>
123
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
124
- <option aria-label="None" value="" />
125
- <optgroup label="day">
126
- {Array.from(Array(31), (_, num) => (
127
- <option key={num} value={num + 1}>
128
- {num + 1}
129
- </option>
130
- ))}
131
- </optgroup>
132
- </Select>
133
- </FormControl>
134
- </div>
135
- </>
129
+ return <Basic />;
136
- );
137
130
  case 1:
138
- return (
139
- <div>
140
- <FormControl component="fieldset">
131
+ return <Questionnaire {...questionnaireProps} />;
141
- <FormLabel component="legend">現在、生命保険に加入されていますか?</FormLabel>
142
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
143
- <FormControlLabel value="yes" control={<Radio />} label="はい" />
144
- <FormControlLabel value="no" control={<Radio />} label="いいえ" />
145
- </RadioGroup>
146
-
147
- <FormLabel component="legend">
148
- 現在、入院中ですか。また、3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことがありますか?
149
- </FormLabel>
150
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
151
- <FormControlLabel value="yes" control={<Radio />} label="はい" />
152
- <FormControlLabel value="no" control={<Radio />} label="いいえ" />
153
- </RadioGroup>
154
-
155
- <FormLabel component="legend">
156
- 過去、5年以内に病気やケガで手術を受けたことまたは継続して7日以上の入院をしたことはありますか?
157
- </FormLabel>
158
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
159
- <FormControlLabel value="yes" control={<Radio />} label="はい" />
160
- <FormControlLabel value="no" control={<Radio />} label="いいえ" />
161
- </RadioGroup>
162
- </FormControl>
163
- </div>
164
- );
165
132
  case 2:
166
- return (
167
- <Grid container>
168
- <Grid sm={2} />
133
+ return <Optional />;
169
- <Grid lg={8} sm={8} spacing={10}>
170
- <Tooltip title="ご相談内容を記入することができます" placement="top-start" arrow>
171
- <TextField
172
- label="ご相談内容"
173
- fullWidth
174
- margin="normal"
175
- rows={4}
176
- multiline
177
- variant="outlined"
178
- placeholder="その他ご要望等あれば、ご記入ください"
179
- />
180
- </Tooltip>
181
- </Grid>
182
- </Grid>
183
- );
184
134
  case 3:
185
- return (
186
- <div>
187
- <FormControl component="fieldset">
188
- <FormLabel component="legend">- 性別 -</FormLabel>
189
- <InputLabel children="gender" />
190
- <InputFieldDetails>{fields.contact.gender}</InputFieldDetails>
191
- <FormLabel component="legend">- 生年月日 -</FormLabel>
192
- <InputLabel children="year" />
193
- <InputLabel children="month" />
194
- <InputLabel children="day" />
195
- <InputFieldDetails>{fields.contact.birthday}</InputFieldDetails>
196
- <FormLabel component="legend">現在、生命保険に加入されていますか?</FormLabel>
197
- <FormLabel component="legend">
198
- <InputLabel children="question1" />
199
- <InputFieldDetails>{fields.contact.question1}</InputFieldDetails>
200
- 現在、入院中ですか。また、3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことがありますか?
201
- </FormLabel>
202
- <InputLabel children="question2" />
203
- <InputFieldDetails>{fields.contact.question2}</InputFieldDetails>
204
- <FormLabel component="legend">
205
- 過去、5年以内に病気やケガで手術を受けたことまたは継続して7日以上の入院をしたことはありますか?
206
- </FormLabel>
207
- <InputLabel children="question3" />
208
- <InputFieldDetails>{fields.contact.question3}</InputFieldDetails>
209
- <FormLabel component="legend">ご相談内容</FormLabel>
210
- <InputLabel children="" />
211
- </FormControl>
135
+ return <Confirm />;
212
- </div>
213
- );
214
136
  default:
215
137
  return "Unknown stepIndex";
216
138
  }
217
- }
139
+ };
218
-
219
140
  function Content() {
220
141
  const [activeStep, setActiveStep] = React.useState(0);
142
+ const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null));
221
143
  const steps = getSteps();
222
144
  const handleNext = () => {
223
145
  setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -228,6 +150,7 @@
228
150
  const handleReset = () => {
229
151
  setActiveStep(0);
230
152
  };
153
+ const buttonDisabled = activeStep === 1 && answers.some((a) => !a);
231
154
  return (
232
155
  <Grid container>
233
156
  <Grid sm={2} />
@@ -246,11 +169,13 @@
246
169
  </div>
247
170
  ) : (
248
171
  <div>
172
+ <Typography>
249
- <Typography>{getStepContent(activeStep)}</Typography>
173
+ <StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} />
174
+ </Typography>
250
175
  <Button disabled={activeStep === 0} onClick={handleBack}>
251
176
  戻る
252
177
  </Button>
253
- <Button variant="contained" color="primary" onClick={handleNext}>
178
+ <Button variant="contained" color="primary" onClick={handleNext} disabled={buttonDisabled}>
254
179
  {activeStep === steps.length - 1 ? "送信" : "次へ"}
255
180
  </Button>
256
181
  </div>
@@ -259,6 +184,86 @@
259
184
  </Grid>
260
185
  );
261
186
  }
187
+ export default Content;
188
+ ```
189
+ **src / components / Optional.js**
190
+ ```
191
+ import React from "react";
192
+ import { Grid } from "@mui/material";
193
+ import Tooltip from "@mui/material/Tooltip";
194
+ import TextField from "@mui/material/TextField";
262
195
 
196
+ const Optional = () => {
197
+ return (
198
+ <div>
199
+ <Grid container>
200
+ <Grid sm={2} />
201
+ <Grid lg={8} sm={8} spacing={10}>
202
+ <Tooltip title="ご相談内容を記入することができます" placement="top-start" arrow>
203
+ <TextField
204
+ label="ご相談内容"
205
+ fullWidth
206
+ margin="normal"
207
+ rows={4}
208
+ multiline
209
+ variant="outlined"
210
+ placeholder="その他ご要望等あれば、ご記入ください"
211
+ />
212
+ </Tooltip>
213
+ </Grid>
214
+ </Grid>
215
+ </div>
216
+ );
217
+ };
263
- export default Content;
218
+ export default Optional;
219
+ ```
220
+ **src / components / Questionnaire.js**
221
+ ```
222
+ import React from "react";
223
+ import Typography from "@mui/material/Typography";
224
+ import Radio from "@mui/material/Radio";
225
+ import RadioGroup from "@mui/material/RadioGroup";
226
+ import FormControlLabel from "@mui/material/FormControlLabel";
227
+ import FormControl from "@mui/material/FormControl";
228
+ import FormLabel from "@mui/material/FormLabel";
229
+
230
+ export const QUESTIONS = [
231
+ "現在、生命保険に加入されていますか?",
232
+ "現在、入院中ですか。また、3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことがありますか?",
233
+ "過去、5年以内に病気やケガで手術を受けたことまたは継続して7日以上の入院をしたことはありますか?",
234
+ ];
235
+
236
+ const Questionnaire = ({ answers, setAnswers }) => {
237
+ const handleAnswer = (answeredIndex, answer) => {
238
+ setAnswers(answers.map((e, i) => (i === answeredIndex ? answer : e)));
239
+ };
240
+ return (
241
+ <div>
242
+ <FormControl component="fieldset">
243
+ {answers
244
+ .filter((_, i) => i === 0 || answers[i - 1])
245
+ .map((answer, i) => (
246
+ <React.Fragment key={i}>
247
+ <FormLabel component="legend">{QUESTIONS[i]}</FormLabel>
248
+ {answer ? (
249
+ <Typography>{answer === "yes" ? "はい" : "いいえ"}</Typography>
250
+ ) : (
251
+ <RadioGroup
252
+ row
253
+ aria-label="gender"
254
+ name="row-radio-buttons-group"
255
+ onChange={(_evt, value) => {handleAnswer(i, value);
256
+ }}
257
+ >
258
+ <FormControlLabel value="yes" control={<Radio />} label="はい" />
259
+ <FormControlLabel value="no" control={<Radio />} label="いいえ" />
260
+ </RadioGroup>
261
+ )}
262
+ </React.Fragment>
263
+ ))}
264
+ </FormControl>
265
+ </div>
266
+ );
267
+ };
268
+ export default Questionnaire;
264
269
  ```

4

コード訂正

2021/11/04 09:42

投稿

edu
edu

スコア35

title CHANGED
File without changes
body CHANGED
@@ -186,15 +186,28 @@
186
186
  <div>
187
187
  <FormControl component="fieldset">
188
188
  <FormLabel component="legend">- 性別 -</FormLabel>
189
+ <InputLabel children="gender" />
190
+ <InputFieldDetails>{fields.contact.gender}</InputFieldDetails>
189
191
  <FormLabel component="legend">- 生年月日 -</FormLabel>
192
+ <InputLabel children="year" />
193
+ <InputLabel children="month" />
194
+ <InputLabel children="day" />
195
+ <InputFieldDetails>{fields.contact.birthday}</InputFieldDetails>
190
196
  <FormLabel component="legend">現在、生命保険に加入されていますか?</FormLabel>
191
197
  <FormLabel component="legend">
198
+ <InputLabel children="question1" />
199
+ <InputFieldDetails>{fields.contact.question1}</InputFieldDetails>
192
200
  現在、入院中ですか。また、3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことがありますか?
193
201
  </FormLabel>
202
+ <InputLabel children="question2" />
203
+ <InputFieldDetails>{fields.contact.question2}</InputFieldDetails>
194
204
  <FormLabel component="legend">
195
205
  過去、5年以内に病気やケガで手術を受けたことまたは継続して7日以上の入院をしたことはありますか?
196
206
  </FormLabel>
207
+ <InputLabel children="question3" />
208
+ <InputFieldDetails>{fields.contact.question3}</InputFieldDetails>
197
209
  <FormLabel component="legend">ご相談内容</FormLabel>
210
+ <InputLabel children="" />
198
211
  </FormControl>
199
212
  </div>
200
213
  );

3

文章訂正

2021/10/30 11:33

投稿

edu
edu

スコア35

title CHANGED
@@ -1,1 +1,1 @@
1
- 【React】質問の回答を確認画面に表示させたい
1
+ 【React】質問の回答を確認画面に表示させたい
body CHANGED
File without changes

2

文章訂正

2021/10/29 23:32

投稿

edu
edu

スコア35

title CHANGED
@@ -1,1 +1,1 @@
1
- 【React】質問の回答を確認画面に表示させたい
1
+ 【React】質問の回答を確認画面に表示させたい
body CHANGED
File without changes

1

2021/10/29 23:30

投稿

edu
edu

スコア35

title CHANGED
File without changes
body CHANGED
File without changes