【React】子コンポーネントから親コンポーネントへデータを渡す

子が好きなタイミングで親のメソッド実行する

Vueと同じように子コンポーネントの好きなタイミングで親コンポーネントに作成したカスタムイベントを発火させることができる。その時の引数としてデータを受け取る、という流れである。

注意点として、親コンポーネントではカスタムイベント={メソッド名}として関数への参照を渡す。 子から送られてきたデータは引数としてメソッド内で受け取ることができる。

// 親コンポーネント

handleMyEvent = (value) => {
  console.log(value) // 3
}

<Counter myEvent={this.handleMyEvent} />
 


// 子コンポーネント
<button onClick={() => this.props.myEvent(3)} >myEventを発火</button>

データフローは単一方向

データフローは単一方向、つまり「親から子へ」という一方通行である。 親のデータを子から変更することはできない。子のデータは親からもらうので、もちろん子は親のデータに依存している。 具体例で説明しよう。

親が貧乏になると一緒に子どもも一緒に貧乏になる。一方で、子どもが親からもらったお小遣いを使い果たしても親は貧乏にならない。子どもは親のお金を勝手に使うことはできない。じゃあどうするか？子どもは親に「お金が欲しい。いくら欲しい」ということを伝えるのだ。親は事前にお金がなくなったら言いなさい、と子どもにカスタムイベントを渡している。あとはそれを、子どもが引数つき（なくてもよい）で、好きなタイミングで実行するのだ。親は我が子の助けが来たらお金をあげようとずっと待ち構えている（イベントを購読）。親はそのイベントが起きるとまたお金をあげる、つまり任意の関数を実行するのである。

controlled component

controlled componentとは自分でstateを持たないコンポーネントのことである。 propsで親から全てのデータを受け取り、データを変更したい時は親からもらったイベントを発火させる。 そして親のメソッド内でデータを変更する。 つまり、その名の通り完全に親に依存するコンポーネントである。