Reactで親コンポーネントの状態を子コンポーネントから変更する

はじめに

親から子にデータを渡す際は素直に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に更新できます。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping