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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

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

解決済

相談内容を記入した内容を確認画面で表示したい。

edu
edu

総合スコア30

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

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

1回答

-1評価

0クリップ

499閲覧

投稿2021/11/16 12:49

編集2021/11/17 15:05

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

相談内容を記入した内容を確認画面 (Content.js / case3) で表示したい。
どのように実装したら良いかわからない状況で、詰まっています。 アドバイスをお願いします。

問題解決のため行なったこと

Optional コンポーネントは中で state を扱えていないので、Questionnaire.jsを参考にした。
また、渡すべき state を React.useState() で作ったり、それを props で渡していないので、
表示する以前に回答の保存ができていないので、Questionnaire.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 = ({ request, setRequest }) => { 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;

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 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 [basicProfile, setBasicProfile] = React.useState({ gender: null, year: null, month: null, day: null }); const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null)); // const [request, setRequest] = React.useState(); 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 }} basicProps={{ basicProfile, setBasicProfile }} /> </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%

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

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

質問する

関連した質問

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

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

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