質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

【React】生年月日入力画面のソースコード(optionの要素と値)を動的に作成したい

edu
edu

総合スコア30

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

1047閲覧

投稿2021/10/28 01:20

ReactでMaterial-UI を使用して、Web フォームを作成しています。

components / Content.js の case 0: 以下内の生年月日を入力するソースコードを
該当する数字を全て記載するのではなく動的に作成したいです。

色々調べたのですが、どのように実装したら良いかわからない状況で、詰まっています。
何方かアドバイスをお願いします。

期待する動作

components / Content.js の case 0: 以下内の生年月日を入力するソースコードを
該当する数字を全て記載するのではなく動的に作成したいです。

問題解決のため行ったこと
フォームと連動するプルダウンなどの記事を検索したが、
classコンポーネントで書いてある記事が多く、
色々試したがうまく連動できなかった。

###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') ); reportWebVitals();

###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;

###src / components / 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 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 InputLabel from "@mui/material/InputLabel"; import Select from "@mui/material/Select"; import Datepicker from "@mui/material/Datepicker"; const QUESTIONS = [ "現在、生命保険に加入されていますか?", "現在、入院中ですか。また、3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことがありますか?", "過去、5年以内に病気やケガで手術を受けたことまたは継続して7日以上の入院をしたことはありますか?", ]; const Questionnaire = ({ answers, setAnswers }) => { const handleAnswer = (answeredIndex, answer) => { setAnswers(answers.map((e, i) => (i === answeredIndex ? answer : e))); }; return ( <div> <Datepicker controls={["date"]} touchUi={true} /> <FormControl component="fieldset"> {answers .filter((_, i) => i === 0 || answers[i - 1]) .map((answer, i) => ( <React.Fragment key={i}> <FormLabel component="legend">{QUESTIONS[i]}</FormLabel> {answer ? ( <Typography>{answer === "yes" ? "はい" : "いいえ"}</Typography> ) : ( <RadioGroup row aria-label="gender" name="row-radio-buttons-group" onChange={(_evt, value) => { handleAnswer(i, value); }} > <FormControlLabel value="yes" control={<Radio />} label="はい" /> <FormControlLabel value="no" control={<Radio />} label="いいえ" /> </RadioGroup> )} </React.Fragment> ))} </FormControl> </div> ); }; function getSteps() { return ["お客様の情報を入力してください", "以下にお答えください", "ご相談ください"]; } const StepContent = ({ stepIndex, questionnaireProps }) => { switch (stepIndex) { case 0: return ( <> <div> <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> <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"> <option value={1}> 1990</option> <option value={2}> 1991</option> <option value={3}> 1992</option> <option value={4}> 1993</option> <option value={5}> 1994</option> <option value={6}> 1995</option> <option value={7}> 1996</option> <option value={8}> 1997</option> <option value={9}> 1998</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"> <option value={1}> 1</option> <option value={2}> 2</option> <option value={3}> 3</option> <option value={4}> 4</option> <option value={5}> 5</option> <option value={6}> 6</option> <option value={7}> 7</option> <option value={8}> 8</option> <option value={9}> 9</option> <option value={10}> 10</option> <option value={11}> 11</option> <option value={12}> 12</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"> <option value={1}> 1</option> <option value={2}> 2</option> <option value={3}> 3</option> <option value={4}> 4</option> <option value={5}> 5</option> <option value={6}> 6</option> <option value={7}> 7</option> <option value={8}> 8</option> <option value={9}> 9</option> <option value={10}> 10</option> </optgroup> </Select> </FormControl> </div> </> ); case 1: return <Questionnaire {...questionnaireProps} />; 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 [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> <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;

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。