Basic.js Optional.js の質問及び答えた回答をContent.js / case3で表示したい【2回目】
ReactでMaterial-UI を使用して、Web フォームを作成しています。
Basic.js Optional.js の質問及び答えた回答をContent.js case3で表示したい。
どのように実装したら良いかわからない状況で、詰まっています。 何方かアドバイスをお願いします。
期待する動作
Basic.js Optional.js の質問及び答えた回答をContent.js case3で表示したい。
問題解決のため行なったこと
① Questionnaire.jsの質問の回答はContent.js/case3の確認画面で表示できたが、Questionnaireの実装と同じようにBasic Optional の実装を
Content.js/case3行なったが、同じように確認画面で表示できなかった。
②【1回目】でReactの基本的な使い方の理解のアドバイスを頂き、ドキュメント、過去勉強したUdemyやyoutubeなどを復習して教材上では理解できたが、
このアプリだと書き方がわからない。
src / components / Basic.js
Basic.js
import React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import InputLabel from "@mui/material/InputLabel";
import Select from "@mui/material/Select";
const Basic = () => {
return (
<>
<div style={{ textAlign: "center" }}>
<FormControl component="fieldset">
<FormLabel component="legend">- 性別 -</FormLabel>
<RadioGroup row aria-label="gender" name="row-radio-buttons-group">
<FormControlLabel value="male" control={<Radio />} label="男性" />
<FormControlLabel value="female" control={<Radio />} label="女性" />
</RadioGroup>
</FormControl>
</div>
<div style={{ textAlign: "center" }}>
<FormLabel component="legend">- 生年月日 -</FormLabel>
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel htmlFor="grouped-native-select">year</InputLabel>
<Select native defaultValue="" id="grouped-native-select" label="Grouping">
<option aria-label="None" value="" />
<optgroup label="year">
{Array.from(Array(2020), (_, num) => (
<option key={num} value={num + 1}>
{num + 1990}
</option>
))}
</optgroup>
</Select>
</FormControl>
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel htmlFor="grouped-native-select">month</InputLabel>
<Select native defaultValue="" id="grouped-native-select" label="Grouping">
<option aria-label="None" value="" />
<optgroup label="month">
{Array.from(Array(12), (_, num) => (
<option key={num} value={num + 1}>
{num + 1}
</option>
))}
</optgroup>
</Select>
</FormControl>
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel htmlFor="grouped-native-select">day</InputLabel>
<Select native defaultValue="" id="grouped-native-select" label="Grouping">
<option aria-label="None" value="" />
<optgroup label="day">
{Array.from(Array(12), (_, num) => (
<option key={num} value={num + 1}>
{num + 1}
</option>
))}
</optgroup>
</Select>
</FormControl>
</div>
</>
);
};
export default Basic;
src / components / Optional.js
Optional.js
import React from "react";
import { Grid } from "@mui/material";
import Tooltip from "@mui/material/Tooltip";
import TextField from "@mui/material/TextField";
const Optional = () => {
return (
<div>
<Grid container>
<Grid sm={2} />
<Grid lg={8} sm={8} spacing={10}>
<Tooltip title="ご相談内容を記入することができます" placement="top-start" arrow>
<TextField
label="ご相談内容"
fullWidth
margin="normal"
rows={4}
multiline
variant="outlined"
placeholder="その他ご要望等あれば、ご記入ください"
/>
</Tooltip>
</Grid>
</Grid>
</div>
);
};
export default Optional;
src / components / contents.js
contents.js
import React from "react";
import { Grid } from "@mui/material";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Basic from "./Basic";
import Questionnaire, { QUESTIONS } from "./Questionnaire";
import Optional from "./Optional";
function getSteps() {
return ["お客様の情報を入力して下さい", "以下にお答え下さい", "ご相談下さい", "以下の内容をご確認下さい"];
}
const StepContent = ({ stepIndex, BasicProps, questionnaireProps, OptionalProps }) => {
switch (stepIndex) {
case 0:
return <Basic {...BasicProps} />;
case 1:
return <Questionnaire {...questionnaireProps} />;
case 2:
return <Optional {...OptionalProps} />;
case 3:
return (
<div style={{ textAlign: "center" }}>
<Basic {...BasicProps} />
<Questionnaire {...questionnaireProps} />
<Optional {...OptionalProps} />
</div>
);
default:
return "Unknown stepIndex";
}
};
function Content() {
const [activeStep, setActiveStep] = React.useState(0);
const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null));
const steps = getSteps();
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
const buttonDisabled = activeStep === 1 && answers.some((a) => !a);
return (
<Grid container>
<Grid sm={2} />
<Grid lg={8} sm={8} spacing={10}>
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
{activeStep === steps.length ? (
<div style={{ textAlign: "center" }}>
<Typography>全ステップの表示を完了</Typography>
<Button onClick={handleReset}>リセット</Button>
</div>
) : (
<div>
<Typography>
<StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} />
</Typography>
<Button disabled={activeStep === 0} onClick={handleBack}>
戻る
</Button>
<Button variant="contained" color="primary" onClick={handleNext} disabled={buttonDisabled}>
{activeStep === steps.length - 1 ? "送信" : "次へ"}
</Button>
</div>
)}
</Grid>
</Grid>
);
}
export default Content;
0
