はじめに
親から子にデータを渡す際は素直にpropsで渡せば良いですが、
子から親のデータを変更する際は関数を実行して変更するので、その方法をまとめました。
どうすれば子コンポーネントで親コンポーネントの状態を変えられるのか
結論から言うと、
・親コンポーネントでuseStateと関数を定義
・propsとしてその関数を子コンポーネントに渡す
・子コンポーネントでpropsで渡された関数を実行して更新
の手順で出来ます。
簡単な例で見ていきましょう。
親コンポーネント
~
//useStateでデータを定義。初期値をfalseに
const [state,setState] = useState(false)
//関数のchangeStateを定義。引数のisStateは子コンポーネントで実行した際に取ってくる。
const changeState = (isState) => {
setState(isState)
}
return (
<div>
//propsとして子コンポーネントに関数を渡す
<childComponent changeState={changeState} />
</div>
)
}
子コンポーネントでは
~
//とりあえずisStateにはtrueを格納
const isState = true
//親から貰った関数を実行
changeState(isState)
これで親コンポーネントのstateはtrueに更新できます。
リンク