子元件event往上層傳遞

當子元件的事件被觸發,需要通知上層物件,並往上傳遞資料
在上層元件的render內,設定好子元件的屬性用來處理子元件所傳遞上來的資訊

父元件

var MyBox = React.createClass({
  handleChildClick: function(comment) {
    ....
  },        
  render: function() {
    return (
      <div className="commentBox">
        <CommentForm onChildClick={this.handleChidClick} />
      </div>
    );
  }
});

在子元件的rende內真正html上設定事件的Handler
而在這handler內
以this.props.xxx()來執行被定義在這子元件上的handler
事件的傳遞方向事由子元件html->子元件->父元件
注意:一個元件上要指定有什麼prop,是在上層物件上指定的

子元件

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    ...
    this.props.onChildClick({author: author, text: text});
    ...
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});