React：事件处理

<button onClick={this.handleSaveClick}>保存</button>

当用户点击这个按钮时，组件的handleSaveClick方法会被调用。

注意：虽然上面代码的写法类似HTML的内联事件处理器（在HTML中是不推荐的），但在渲染后的HTML页面内，我们并不会看到onClick这个方法，这只是React用这种写法来绑定事件处理器。

这里还要注意一点的是，如果你要调取触控事件，就需要调用下面的代码来启用。

React.initializeTouchEvents(true)

看个小例子：

var MyInput=React.createClass({   
  getDefaultProps:function(){   
    return {   
      placeholder:'请输入值'      
    };   
  },   
  getInitialState:function(){   
    return {    
      name:"请输入"   
    }   
  },   
  handleChange:function(event){   
    var name=event.target.value;   
    this.setState({"name":"输入值为："+name});   
  },   
  render:function(){   
    return (   
      <div>   
        <input ref='name' onChange={this.handleChange} type='text' placeholder={this.props.placeholder}/>   
        <div>{this.state.name}</div>   
      </div>   
    );   
  }   
});   
ReactDOM.render(   
  <MyInput/>,   
  document.body   
);

效果图：

组件状态默认是null，我们可以通过getInitialState方法将其初始化。

注意：有一点很重要，永远不要尝试通过setState或replaceState以外的方式修改state对象。类似this.state.isClicked=true通常不是一个好方法，因为它无法通知React是否需要重新渲染组件，而且可能会导致下次调用setState时出现意外结果。

总结：

• 我们可以像在HTML里添加内联事件一样的方式给React组件上绑定事件处理器。
• 当组件状态有更新时，会执行render方法，触发重绘。
• 用this.setState()来更新状态