前提
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コンポーネントを流用しています。
0 コメント