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

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

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

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

React.js

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

Q&A

解決済

1回答

2449閲覧

『Search for the keywords to learn more about each error. 』を改善したい

edu

総合スコア35

Material-UI

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

React.js

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

0グッド

0クリップ

投稿2021/10/29 00:13

編集2021/11/07 02:27

ReactでMaterial-UIを使用して、Webフォームを作成します。
下記のエラーの表示を改善したいです。
どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。

Search for the keywords to learn more about each error.  src/components/Content.js Line 38:35: 'handleNext' is not defined no-undef Line 40:43: 'handleNext' is not defined no-undef Line 40:67: 'handleBack' is not defined no-undef Line 42:38: 'handleNext' is not defined no-undef Line 42:62: 'handleBack' is not defined no-undef Line 44:37: 'handleBack' is not defined no-undef Line 53:30: 'activeStep' is not defined no-undef Line 54:12: 'steps' is not defined no-undef Line 61:27: 'activeStep' is not defined no-undef Line 61:39: 'handleNext' is not defined no-undef Line 61:51: 'handleBack' is not defined no-undef

App.js

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/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 Basic from "./Basic"; import Questionnaire from "./Questionnaire"; import Optional from "./Optional"; import Confirm from "./Confirm"; export const UserInputData = React.createContext(); function Content() { const [currentState, setCurrentState] = React.useState({}); const value = { currentState, setCurrentState, }; function getSteps() { return ["お客様の情報を入力してください", "以下にお答えください", "ご相談ください", "以下の内容をご確認ください"]; } function getStepContent(stepIndex) { switch (stepIndex) { case 0: return <Basic handleNext={handleNext} />; case 1: return <Questionnaire handleNext={handleNext} handleBack={handleBack} />; case 2: return <Optional handleNext={handleNext} handleBack={handleBack} />; case 3: return <Confirm handleBack={handleBack} />; default: return "Unknown stepIndex"; } } 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> <UserInputData.Provider value={value}> {getStepContent(activeStep, handleNext, handleBack)} </UserInputData.Provider> </Grid> </Grid> ); } export default Content;

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FKM

2021/10/29 09:33

クラスコンポーネントで書いてるなら関数コンポーネントに書き直せばいいのではないでしょうか。 逆は無理が生じてくることが多いですが、Reduxでも使っていない限り、クラスコンポーネントから 関数コンポーネントへの書き換えはそこまで難しいものではないですよ。
edu

2021/10/29 09:56

FKMさん、アドバイスありがとうございます! おしゃる事は正論だと思います。 過去、クラスコンポーネントがままならないのに、 関数コンポーネントに手を出し、ぐちゃぐちゃになったので、 クラスコンポーネントで、ある程度自走出来るようになって、 もう少しレベルアップしてから、再度、関数コンポーネントの勉強したいと思います。
guest

回答1

0

自己解決

最初に出ているエラーは src/components/Content.js 38行目の35文字目で handleNext が未定義だと言っているので、定義したら改善した。

投稿2021/11/07 12:52

edu

総合スコア35

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問