ReactでMaterial-UI を使用して、Web フォームを作成しています。 material-ui selectコードをcontent.jsファイルの case0のradioボタンのソースコードの下に導入して、 生年月日を選択できるようにしたいです。
何度かmaterial-ui selectコードをcontent.jsファイルの case0のradioボタンのソースコードの下に導入を試みたのですが、 波線の表示が出て、それを解消できず、期待する動作をしない状況で、詰まっています。 何方かアドバイスをお願いします。
期待する動作 material-ui selectコードをcontent.js case0のradioボタンのソースコードの下に導入して、 生年月日を選択できるようにしたい。
現在の状況 material-uiラジオボタンのソースコードを入力した後、material-ui selectコードを入力したら 波線が出てエラー表示になる状況。
※ 前回material-ui(v4)と(v5)のコードが混在していると指摘を受けたので、 パッケージを書き直して、インストールをし直しました。 エラー内容
Failed to compile.
./src/components/Content.js
SyntaxError: /Users/ ~ /react_kadai_2/src/components/Content.js: 'import' and 'export' may only appear at the top level. (25:2)
23 |
24 | function getStepContent(stepIndex) {
> 25 | export default function BasicSelect() {
| ^
26 | const [age, setAge] = React.useState("");
27 |
28 | const handleChange = (event) => {
//content.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 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 Tooltip from "@mui/material/Tooltip";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
function getSteps() {
return ["お客様の情報を入力してください", "以下にお答えください", "ご相談ください"];
}
function getStepContent(stepIndex) {
// ⬇︎追加したいコード
export default function BasicSelect() {
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
// ⬆︎追加したいコード
switch (stepIndex) {
case 0:
return (
<>
<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>
// ⬇︎追加したいコード
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</Box>
// ⬆︎追加したいコード
</>
);
case 1:
return (
<FormControl component="fieldset">
<FormLabel component="legend">- 現在、生命保険に加入されていますか？ -</FormLabel>
<RadioGroup row aria-label="gender" name="row-radio-buttons-group">
<FormControlLabel value="yes" control={<Radio />} label="はい" />
<FormControlLabel value="no" control={<Radio />} label="いいえ" />
</RadioGroup>
<FormLabel component="legend">
- 現在、入院中ですか。また、3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことがありますか？
-
</FormLabel>
<RadioGroup row aria-label="gender" name="row-radio-buttons-group">
<FormControlLabel value="yes" control={<Radio />} label="はい" />
<FormControlLabel value="no" control={<Radio />} label="いいえ" />
</RadioGroup>
<FormLabel component="legend">
- 過去、5年以内に病気やケガで手術を受けたことまたは継続して７日以上の入院をしたことはありますか？ -
</FormLabel>
<RadioGroup row aria-label="gender" name="row-radio-buttons-group">
<FormControlLabel value="yes" control={<Radio />} label="はい" />
<FormControlLabel value="no" control={<Radio />} label="いいえ" />
</RadioGroup>
</FormControl>
);
case 2:
return (
<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>
);
default:
return "Unknown stepIndex";
}
}
function Content() {
const [activeStep, setActiveStep] = React.useState(0);
const steps = getSteps();
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
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>
<Typography>全ステップの表示を完了</Typography>
<Button onClick={handleReset}>リセット</Button>
</div>
) : (
<div>
<Typography>{getStepContent(activeStep)}</Typography>
<Button disabled={activeStep === 0} onClick={handleBack}>
戻る
</Button>
<Button variant="contained" color="primary" onClick={handleNext}>
{activeStep === steps.length - 1 ? "送信" : "次へ"}
</Button>
</div>
)}
</Grid>
</Grid>
);
}
}
export default Content;
//App.js
import "./App.css";
import { Grid } from "@mui/material";
import Header from "./components/Header";
import Content from "./components/Content";
function App() {
return (
<Grid container direction="column">
<Header />
<div style={{ padding: 30 }}>
<Content />
</div>
</Grid>
);
}
export default App;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
