react的事件处理

• React 里面绑定事件的方式和在 HTML中绑定事件类似，使用驼峰式命名指定要绑定的事件属性（如： onClick ）为组件定义的一个方法。
• 例如： 在子组件上使用表单。 onChange 方法将触发 父组件state 的更新并将更新的值通过prop属性传递到子组件的输入框的 value 上来重新渲染界面。

//创建子组件Content
 var Content = React.createClass({
      render: function() {
        return  <div>
        //为input标签设置value属性，属性值为组件props属性的myDataProp值。并绑定onChange事件，事件的函数为子组件的props属性的update值，是父组件的一个函数。
                <input type="text" value={this.props.myDataProp} onChange={this.props.update} /> 
                <h4>{this.props.myDataProp}</h4>
                </div>;
      }
    });
    //创建父组件
 var HelloMessage = React.createClass({
    //初始化父组件的状态
      getInitialState: function() {
        return {value: 'Hello Runoob!'};
      },
      //一个响应事件的方法，用于改变父组件的状态
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        var value = this.state.value;
        //为子组件设置myDataProp属性，属性值为父组件的状态值，为子组件设置update属性，属性值为父组件的一个方法，在子组件中调用
        return <div>
                <Content myDataProp = {value} 
                  update = {this.handleChange}></Content>
               </div>;
      }
    });
    //当input文本框的内容发生变化时，响应update函数，改变父组件的状态，导致页面组件的重新渲染，子组件myDataProp属性发生变化，h4标签的内容最终发生变化和文本框内容一致。
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );

• 如果一个程序有组件的嵌套，再调用ReactDOM.render方法时，先实例化父组件，调用父组件的render方法，再实例化子组件，调用子组件的render方法，记住这个执行顺序。