Reactでイベントの伝播

Reactアプリケーションで、コンポーネントのイベント伝播をしたい場合、どうすればいいのか。
ここでは、子コンポーネントから親コンポーネントにイベントを伝播することを想定している。

結果

子コンポーネントでthis.propにコールバック関数を定義し、その関数から親コンポーネントの呼び出すことが出来ました。 コールバックという仕組みは便利ですね。

子コンポーネントのコード

this.propsにonEventCallbackというコールバック関数を定義しています。
このコールバック関数は親のほうで使います。

import React, {Component} from 'react'

class Child extends Component {

  click (e) {
    this.props.onEventCallback({
      name: 'Child',
      type: 'click'
    })
  }

  render () {
    return (
      <div>
        <button onClick={e => this.click(e)}>click</button>
      </div>
      )
  }

}

export default Child

親コンポーネントのコード

子コンポーネントで定義したコールバック関数を属性としてJSXに入れます。
<Child onEventCallback={e => this.receive(e)} /> 子コンポーネントでイベントが発生した時、onEventCallbackが呼ばれ、 更にreceive(data)が呼ばれます。

import React, {Component} from 'react'
import Child from './Child.js'

class Parent extends Component {
  receive (data) {
    alert(data.name + ' :: ' + data.type)
  }

  render () {
    return (
      <div>
        <Child onEventCallback={e => this.receive(e)} />
      </div>
    )
  }
}

export default Parent