[react]子のコンポーネントから親のstateを変更する方法

#子のコンポーネントから親のstateを変更する方法
子のコンポーネントから親のstateを変更したい場合があると思います。
最近ここでかなり時間を取られたのでメモがわりに残しておこうと思います。

コード

• parent(親コンポーネント)

import React from 'react';
import PropTypes from 'prop-types';
import child from './child';

class parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hoge: 'hogehoge'
    };
  }

  hogeFunc() {
    this.setState({ hoge: '変えたぞ' });
  }
  render() {
    return (
      <div>
        <child dataHoge={() => { this.hogeFunc(); }} />
      </div>
    );
  }
}

• child(子コンポーネント)

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

const propTypes = {
  dataHoge: PropTypes.func,
};

class child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  
  clickButton() {
    return this.props.dataHoge();
  }
  
  render() {
    return (
      <div>
        <button onClick={() => { this.clickButton(); }}>ボタン</button>
      </div>
    );
  }
}

child.propTypes = propTypes;
export default child;

まとめ

親のコンポーネントでsetStateさせる関数を用意させ、
子のコンポーネントにpropsで関数を渡すことで子のコンポーネントから
その関数を実行できるようになります。