前提
Reactを使ってフォーム機能を作ろうとしています。その中で、プルダウン機能の実装で苦戦中。
実現したいこと
親コンポーネントで宣言したuseStateの変数にプルダウンで選択した項目値を代入したい。
ただし、プルダウン機能は子コンポーネントで実装しています。
発生している問題・エラーメッセージ
親コンポーネントで宣言したuseStateを子コンポーネントにProp経由で渡しています。
抱えている問題としては、子コンポーネントで親コンポーネントから受け取ったuseStateの更新がうまくいかないことです。
該当のソースコード
JavaScript(親コンポーネント)
1import React, { useState } from 'react' 2import FormControl from '@mui/material/FormControl'; 3import PullDown from './common/PullDown' 4 5const Form = () => { 6 const [category, setCategory] = useState("") 7 8 return ( 9 <FormControl> 10 <PullDown value={category} pulldown={setCategory}/> 11 </FormControl> 12 ); 13} 14 15export default Form
JavaScript(子コンポーネント,Pulldown.jsx)
1import React from 'react'; 2import { useTheme } from '@mui/material/styles'; 3import OutlinedInput from '@mui/material/OutlinedInput'; 4import InputLabel from '@mui/material/InputLabel'; 5import MenuItem from '@mui/material/MenuItem'; 6import FormControl from '@mui/material/FormControl'; 7import Select from '@mui/material/Select'; 8 9const ITEM_HEIGHT = 48; 10const ITEM_PADDING_TOP = 8; 11const MenuProps = { 12 PaperProps: { 13 style: { 14 maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, 15 width: 250, 16 }, 17 }, 18}; 19 20const names = [ 21 'アクション', 22 'ミステリー', 23 'スポーツ', 24 'ファンタジー', 25 'ドラマ' 26]; 27 28function getStyles(name, personName, theme) { 29 return { 30 fontWeight: 31 personName.indexOf(name) === -1 32 ? theme.typography.fontWeightRegular 33 : theme.typography.fontWeightMedium, 34 }; 35} 36 37export default function MultipleSelect(prop) { 38 const theme = useTheme(); 39 const [personName, setPersonName] = React.useState([]); 40 41 const handleChange = (event) => { 42 const { 43 target: { value }, 44 } = event; 45 console.log('setPersonName_before_value:',value) 46 setPersonName( 47 typeof value === 'string' ? value.split(',') : value, 48 ); 49 console.log('value:',value) 50 console.log('prop.pulldown_before:',prop.value) 51 prop.pulldown(event) 52 console.log('prop.pulldown_after:',prop.value) 53 }; 54 55 return ( 56 <div> 57 <FormControl sx={{ m: 1, width: 300 }}> 58 <InputLabel id="demo-multiple-name-label">カテゴリ</InputLabel> 59 <Select 60 labelId="demo-multiple-name-label" 61 id="demo-multiple-name" 62 multiple 63 value={personName} 64 onChange={handleChange} 65 input={<OutlinedInput label="カテゴリ" />} 66 MenuProps={MenuProps} 67 > 68 {names.map((name) => ( 69 <MenuItem 70 key={name} 71 value={name} 72 style={getStyles(name, personName, theme)} 73 > 74 {name} 75 </MenuItem> 76 ))} 77 </Select> 78 </FormControl> 79 </div> 80 ); 81}
試したこと
親コンポーネントから受け取ったuseStateの関数(pulldown)前後でログ出力を仕込んだ状態でブラウザからプルダウン項目の選択を実施。
コンソールを確認してみましたが、両方とも空文字のままであることは確認しています。
補足情報(FW/ツールのバージョンなど)
React 18.1.0
@mui/material 5.8.2
子コンポーネントの実装はMaterial-UI公式ドキュメントに載っているSelectコンポーネントを流用しています。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/07/24 02:05