【React.js】子から親コンポーネントへ値を渡す

React初心者

Reactで子コンポーネントから、親コンポーネントに値を受け渡すには、どうやってやるの?

こういった声に答えていきます。

親コンポーネントから子コンポーネントへ値を渡すのはpropsを使います。これについては色々なところで説明されています。私も記事を書いています。

関連記事【React.js】親から子コンポーネントへpropsで値を渡す

しかし、子から親コンポーネントへ値を渡す方法については、あまり情報がない気がします。私も情報がなくて困りました。あっても難しくて困りました。

そこで、今回は、子から親コンポーネントへ値を渡す方法について紹介します。もちろん、私と同じ初心者向けの内容となっております。よろしく!

子から親コンポーネントへ値を渡す

今回は、関数コンポーネント間を対象とします。そして、フック(hook)を使います。最近は、あまりクラスを使わずに、関数コンポーネントを使ってコードを書くことが多いらしいので。

子から親コンポーネントへ値を渡すのは、子から親のstateを変更することで達成します。このあたりは後で説明します。

準備

まず、以下を定義します。

  • 親の関数コンポーネント(Parent
  • 子の関数コンポーネント(Child

そして、Childコンポーネント内で変数childを定義します。Parentコンポーネント内に<Child />と書いて、子コンポーネントの内容を親コンポーネントに反映させます。

この時点では、以下のように表示されます。

と〜げ

ちなみに、”子” を中央に表示させるには、App.cssに以下を書くと良いでしょう。

と、ここまで準備です。ここから本番です。

フック(hook)を使って

フックは、関数コンポーネント内で、stateのようなReactの機能を使うためのものです。なので、フックは React をクラスなしで使うための機能ですので、クラス内では機能しません。

以下のuseState がフックであり、現在の state の値と、それを更新するための関数とをペアにして返します。以下のように書きます。valueがstateの値で、それを更新する関数がsetValueです。useState("")は、引数に初期値を設定します。この場合は空欄です。

const [value, setValue] = useState("");

フックの説明はこんなところで、詳しくはReactの公式チュートリアルのフック早わかりを参照されたい。

ではそろそろ本題に。

子から親コンポーネントへ値を渡すのは、親のParentコンポーネントで定義したフックの更新関数setValueをpropsを使って、子のChildコンポーネントに渡し、Childコンポーネント内でsetValueを使って、親コンポーネントのvalueのstateを変更します。

親のParentコンポーネント内で、const [value, setValue] = useState("")と定義します。そして、propsを使ってsetValueを渡します。親から子コンポーネントのpropsでの渡し方はこちら(関連記事【React.js】親から子コンポーネントへpropsで値を渡す)を見てください。

次に、子のChildコンポーネントは以下のようになります。

変数commentを定義します。const comment = 'やっほ〜'

props.setValueを使って親のParentコンポーネントのvalueのstateを変更します。ここでは、valueの初期値の空欄から、commentに変更しています。

{props.setValue(comment)}

※ 変数childについては削除しています。

そして、親のParentコンポーネントのreturn内に、<p>{value}</p>を追加します。

そうすると、以下のように表示されます。

やっほ〜

親のParentコンポーネントのフックの更新関数setValueをpropsを使って、子のChildコンポーネントに渡し、Childコンポーネント内で、props.setValueを使って、Parentコンポーネント内のvalueを、Childコンポーネントで定義したcommentに変更することが出来ました。

つまり、結果として、子のChildコンポーネントのcommentの値を親のParentコンポーネントに渡すことができました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です