こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
また、未経験から独学でフロントエンドエンジニアになる勉強方法をまとめたので、興味があれば是非！
関連記事
プログラミング 完全初心者 何から勉強すれば良いか分からない。 具体的にやることを教えて欲しい。 こういった疑問に答えて、フロントエンドエンジニアになる為の具体的な勉強プランについて解説しています[…]
はじめに
親から子にデータを渡す際は素直に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に更新できます。
Reactを使って仕事をしたい人へ
Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法のロードマップをまとめました。
関連記事
こんにちは、フロントエンドエンジニアのてりーです。 僕がReact + TypeScriptを使い始めて5年ぐらい経過しました。 大学中退してニートの時期にプログラミングを始めて、ReactとTypeScriptの分野に集中する事で[…]
興味があれば是非ご覧下さい。
フロントエンドでキャリアアップを考えているなら
関連記事
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]
