React.jsで子から親へ イベントを通知する

親コンポーネントのメソッドをコールバック実行するメソッドを
子コンポーネントのpropsに設定するればイベントの通知が可能。

まずイベントを発生させる子コンポーネントを定義する。

var CommentForm = React.createClass({
  clickEvent(e){
    var cast_value = "渡す値";
    this.props.onEventCallBack({ message : cast_value });
    return 
  },
  render : function(){
    return (
        <div>
          <button onClick={this.clickEvent}>click</button>
        </div>
        )
  }
});

次にイベントを検知する親コンポーネントを定義。

var CommentArea = React.createClass({
  
  pushMessage : function(comment){
    console.log(comment);
  },
  render : function(){
    return (
        <div>
          <CommentForm onEventCallBack={this.pushMessage}/>
        </div>
        )
  }
});

これでCommentFormでクリックイベントが発生した際に
「渡す値」がconsole出力される。