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

ちょっと躓いたので、備忘録としてまとめ。
React のコンポーネント間の通信についてです。

現在開発中のアプリ内で、子コンポーネントで特定の値が変更になった時に、親コンポーネントにその変更した値を渡す、という処理をしたかったので調査しました。

参考にさせていただいた記事はこちらから。

Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法 – Qiita
https://qiita.com/kyoshidajp/items/0ddb156d96bb6337f623

子から親コンポーネントにデータを渡す方法には「コールバック関数を使う方法」と「イベントバブリングを使う方法」がありましたが、私はコールバック関数を使う方法をチョイスしました。
これは、親コンポーネントが子コンポーネントに関数を渡すという方法です。

実際のコードはこんな感じ。
まず、親コンポーネントがこちら。

import React, { Component } from 'react';
import ChildComp from './ChildComp';

class ParentPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    }
  }
  changeValue(value) {
    this.setState({ value: value });
  }
  render() {
    return (
      <ChildComp value={this.state.value} changeValue={this.changeValue.bind(this)} />
    );
  }
}

export default ParentPage;

親コンポーネントでは、子コンポーネントを呼び出す際に、一緒に value と changeValue 関数を渡しています。
この changeValue 関数がコールバック関数です。
行数でいうと 16行目です。

次に子コンポーネントがこちら。

import React from 'react';
import PropTypes from 'prop-types';

const ChildComp = props => (
  
<div>
    <button onClick={() => props.changeValue(props.value + 1)}>+1</button>
  </div>

);
ChildComp.propTypes = {
  value: PropTypes.string.isRequired,
  changeValue: PropTypes.func.isRequired,
};

export default ChildComp;

子コンポーネントでは、親コンポーネントから渡された value と changeValue 関数を受け取ってそれを使って処理を行います。
サンプルコードでは、ボタンを押したタイミングで value の値を +1 し、それを changeValue 関数を使って、親コンポーネントに渡しています。
そして親コンポーネントでは、その受け取った値を state に上書き保存しています。
なお、9～12行目の PropTypes の宣言をお忘れなく！

サンプルコードで行っているくらいの処理であれば、別にコンポーネントを分ける必要はないのですが、ちょっと大掛かりなことをしようとしたときは、この書き方を覚えておくととても便利でした。
特に複数のページで同じ処理を行いたい場合、コンポーネントを分けておくと、同じコードを何度も書く必要はなくなるし、何より親コンポーネントのコードがすっきりします！

あまりコンポーネントを理解できていなかった時に開発したアプリでは、この分けるという作業が不十分で…大分ややこしいことになってしまっているので、時間を見つけてリファクタリングを行いたいですね…。

以上、React で子コンポーネントのデータを親コンポーネントに渡す方法でした。
ご参考になれば幸いです。