前提・実現したいこと
お世話になっております。初歩的なご質問かもしれず、大変恐縮ではございますが、ご質問させていただきます。
実現したいことは、ボタンをクリックしたときに、Material UIのDrawerを開いて、その中のTextFieldのValueに対して、このコンポーネント内で生成するステートをsetStateで外部のコンポーネントから持ってきたデータを入れて、表示したいのですが、
クリックされてこちらのコンポーネントが最初にレンダリングされるときには、setStateでの更新が反映されず、空欄になってしまいます。(Drawerを閉じて、再度クリックすると、反映されます)
SetStateは仕組み上即時更新されないようですので、他の方法がないか色々試しているのですが、上手くいきません。他の方法で即時に反映させる方法をご存知な方はいらっしゃいますでしょうか。
React, Typescriptで書いております
該当のソースコード
typescript
1 2const list = ( 3 anchor: Anchor, 4 localState:any, 5 setLocalState:any, 6 state:any, 7 setState:any, 8 dispatch: any, 9 ) => ( 10 <div 11 role="presentation" 12 > 13 <TextField 14 label="Company Name" 15 type="text" 16 name="potential_name" 17 InputProps={{ inputProps: { min: 0, max: 1000 } }} 18 InputLabelProps={{ 19 shrink: true, 20 }} 21 value={localState.potential_name} // こちらのvalueを最初のレンダリングでも反映させたいと思っております 22 onChange={e => setLocalState({ ...localState, potential_name: e.target.value })}/> 23 </div> 24 ) 25 26type Anchor = 'top' | 'left' | 'bottom' | 'right'; 27 28export default function TemporaryDrawer() { 29 30 const dispatch: AppDispatch = useDispatch() 31 32 const selectedDeal = useSelector(selectSelectedPotentialDeal) 33 34 const [localState, setLocalState] = useState<READ_POTENTIAL_DEAL>({ 35 id: 0, 36 potential_name: '', 37 description: '', 38 }) 39 40 const [state, setState] = React.useState({ 41 top: false, 42 left: false, 43 bottom: false, 44 right: false, 45 }); 46 47 const toggleDrawer = (anchor: Anchor, open: boolean) => 48 ( 49 event: React.KeyboardEvent | React.MouseEvent, 50 ) => 51 { 52 53 if ( 54 event.type === 'keydown' && 55 ((event as React.KeyboardEvent).key === 'Tab' || 56 (event as React.KeyboardEvent).key === 'Shift') 57 ) { 58 return; 59 } 60 setState({ ...state, [anchor]: open }); 61 }; 62 63 const clickHandler = (anchor:Anchor) => { 64 65 setLocalState(selectedDeal) // こちらのsetStateでステートを更新しています 66 setState({ ...state, ['right']: true }) // こちらでDrawerを開きます 67 } 68 69 return ( 70 71 <div> 72 {(['right'] as Anchor[]).map((anchor) => ( 73 <React.Fragment key={anchor}> 74 <Button onClick={() => clickHandler(anchor)} > 75 {anchor} 76 </Button> 77 <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}> 78 {list(anchor, localState, setLocalState, state, setState, dispatch, selectedDeal)} 79 </Drawer> 80 </React.Fragment> 81 ))} 82 </div> 83 ); 84} 85 86
回答1件
あなたの回答
tips
プレビュー