useState の利用
まずは、useState で受け渡しする状態を定義します。今回は boolean 型の状態を保持します。
App.tsx
import React, { useState } from 'react'; import './App.css'; import MyButton from './MyButton'; import MyEditor from './MyEditor'; function App() { const [stateProp, setStateProp] = useState<boolean>(false); const updateState = (): void => setStateProp(!stateProp); return ( <div className="App"> <MyButton toggleState={updateState} /> <div>{stateProp}</div> <MyEditor isEditable={stateProp} /> </div> ); } export default App;
props による setter の連携
props を利用して useState の setter を子コンポーネントに渡します。子コンポーネントから setter を呼び出すことで、別の子コンポーネントの状態を切り替えることができます。
MyButton.tsx
import React from "react"; type Props = { toggleState: () => void; }; const MyButton = (props: Props) => { const handleClick = () => { if (props.toggleState) { props.toggleState(); } }; return ( <div> <button onClick={handleClick}>編集可否切り替え</button> </div> ); }; export default MyButton;
別コンポーネントへの状態連携
MyButton.tsx 上での操作で切り替えられた値を、MyEditor.tsx 側でバインドします。
MyEditor.tsx
import React from "react"; type Props = { isEditable: boolean; }; const MyEditor = (props: Props) => { return ( <div> <input type="text" disabled={props.isEditable} /> </div> ); }; export default MyEditor;
React おすすめの学習教材
これから React の学習に取り組もうと考えている場合、Udemy の次の講義がおすすめです!React 開発で必須となる JavaScript の前提知識についても学習できますし、土台作りに最適です👌