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

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

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

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

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

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

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

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

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

準備

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

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

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

import React from 'react';
import './App.css';

function Child() {

  const child = "子"

  return (
    <div>
      <p>{child}</p>
    </div>
  )
}


function Parent() {

  return (
    <div>
      <Child />
    </div>
  );
}

export default Parent;

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

* {
  text-align: center;
}

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

フック（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で値を渡す）を見てください。

function Parent() {

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

  return (
    <div>
      <Children 
        setValue = {setValue}
      />
    </div>
  );
}

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

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

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

{props.setValue(comment)}

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

function Child(props) {

  const comment = 'やっほ〜'

  return (
    <div>
      <p>{props.setValue(comment)}</p>
    </div>
  )
}

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

function Parent() {

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

  return (
    <div>
      <Child
        setValue = {setValue}
      />
      <p>{value}</p>
    </div>
  );
}

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

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

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

 Tech Academy ：オンラインブートキャンプ無料説明会
DMM WEBCAMP ：未経験からIT業界へ転職なら【WebCampPRO】