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

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

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

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

React.js

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

解決済

親コンポ―ネントで宣言したuseStateを子コンポーネントで更新する方法を知りたい

yuki_20211108
yuki_20211108

総合スコア14

Material-UI

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

React.js

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

1回答

0リアクション

0クリップ

295閲覧

投稿2022/07/23 07:48

前提

Reactを使ってフォーム機能を作ろうとしています。その中で、プルダウン機能の実装で苦戦中。

実現したいこと

親コンポーネントで宣言したuseStateの変数にプルダウンで選択した項目値を代入したい。
ただし、プルダウン機能は子コンポーネントで実装しています。

発生している問題・エラーメッセージ

親コンポーネントで宣言したuseStateを子コンポーネントにProp経由で渡しています。
抱えている問題としては、子コンポーネントで親コンポーネントから受け取ったuseStateの更新がうまくいかないことです。

該当のソースコード

JavaScript(親コンポーネント)

import React, { useState } from 'react' import FormControl from '@mui/material/FormControl'; import PullDown from './common/PullDown' const Form = () => { const [category, setCategory] = useState("") return ( <FormControl> <PullDown value={category} pulldown={setCategory}/> </FormControl> ); } export default Form

JavaScript(子コンポーネント,Pulldown.jsx)

import React from 'react'; import { useTheme } from '@mui/material/styles'; import OutlinedInput from '@mui/material/OutlinedInput'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; const ITEM_HEIGHT = 48; const ITEM_PADDING_TOP = 8; const MenuProps = { PaperProps: { style: { maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, width: 250, }, }, }; const names = [ 'アクション', 'ミステリー', 'スポーツ', 'ファンタジー', 'ドラマ' ]; function getStyles(name, personName, theme) { return { fontWeight: personName.indexOf(name) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium, }; } export default function MultipleSelect(prop) { const theme = useTheme(); const [personName, setPersonName] = React.useState([]); const handleChange = (event) => { const { target: { value }, } = event; console.log('setPersonName_before_value:',value) setPersonName( typeof value === 'string' ? value.split(',') : value, ); console.log('value:',value) console.log('prop.pulldown_before:',prop.value) prop.pulldown(event) console.log('prop.pulldown_after:',prop.value) }; return ( <div> <FormControl sx={{ m: 1, width: 300 }}> <InputLabel id="demo-multiple-name-label">カテゴリ</InputLabel> <Select labelId="demo-multiple-name-label" id="demo-multiple-name" multiple value={personName} onChange={handleChange} input={<OutlinedInput label="カテゴリ" />} MenuProps={MenuProps} > {names.map((name) => ( <MenuItem key={name} value={name} style={getStyles(name, personName, theme)} > {name} </MenuItem> ))} </Select> </FormControl> </div> ); }

試したこと

親コンポーネントから受け取ったuseStateの関数(pulldown)前後でログ出力を仕込んだ状態でブラウザからプルダウン項目の選択を実施。
コンソールを確認してみましたが、両方とも空文字のままであることは確認しています。
イメージ説明

補足情報(FW/ツールのバージョンなど)

React 18.1.0
@mui/material 5.8.2

子コンポーネントの実装はMaterial-UI公式ドキュメントに載っているSelectコンポーネントを流用しています。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Material-UI

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

React.js

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