对于用户界面而言，展示只占整体设计因素的一半，另一半则是相应用户输入，即通过JavaScript处理用户产生的事件。
React通过将事件处理器绑定到组建上处理事件，事件触发的同时更新组建的内部状态，内部状态更新会触发组件的重绘。因此，如果视图层想要渲染出事件出发后的结果，它所要做的就是渲染函数中读取组件的内部状态。
一、绑定事件处理器
React处理事件本身和原生的JavaScript事件一样：MouseEvents事件用于点击处理器，Change事件用于表单元素变化，等等，所有事件在命名上与原生的JavaScript规范一致，并且会在相同的情境下被触发，React绑定事件处理器的语法和HTML语法非常相似。比如，在我们的问卷制作工具实例中，包含了下面的代码，在Save按钮上绑定onclick事件处理器。
<button className ='btn btn-save'onClick={this.handleSaveClicked}>Save</button>
用户点击这个按钮时，组件的handleSaveClicked方法会被调用。这个方法中包含处理Save行为的逻辑。
PS：这个代码可在写法上类似普通不推荐的HTML内联事件处理器属性，比如：onClick，但其实在底层实习那上冰没有使用HTML的onClick属性。React只是用这种写法绑定事件处理器，但内部则是按照需要高效的维护着时间处理器。
如果不用JSX语法，你可以选择在参数对象的属性上指定事件处理器，比如：
React.DOM.button({ClassName:'btnbtn-save',onClick:this.handleSaveClicked},"Save");
其中大部分事件不需要而外的处理就可以工作，但是触控事件需要通过调用一下代码手动启动：
React.initializeTouchEvent（true）；
二、事件和状态
1、设想你需要让一个组件随着用户的输入而改变，比如在问卷编辑器中，你想要让用户从一个问题类型的菜单当中拖拽问卷问题。
首先，在渲染函数内部基于HTML5拖放（Drag and Drop）API注册事件处理器，代码如下：
var SurveyEdit =React.creatclass（{
render：function（）{
<div className='survey-edit'>
<div className='row'>
<aside className='sidebar col-md-3'>
<h2>Module</h2>
<DraggableQuestions>
</aside>
<div className='survey-canvas col-md-9'>
<div
className ={'drop-zone well well-drop-zone'}
onDragOver={this.handleDragOver}
onDragEnter={this.handleDragEnter}
onDragLeave={this.handleDragLeave}
onDrop ={this.handleDrop}
>
Drag and drop a module from the left
</div>
</div>
</div>
</div>
}，
}）；
三、根据状态进行渲染
事件处理器方法还需要完成一件事——展开当前已经加入的题目清单。为了实现该功能，你需要充分利用每个React组件的内部状态，组件默认是null，但是可以通过它的getInitialState方法将其出事话为合理的值，比如：
getInitaSate：funciton (){
return {
dropZoneEntered:false，
title：’‘，
introduction：' ',
quesions：【】
}；
}
以上代码组件初始化了默认值：一个空标题、一个空的介绍、一组空的题目以及一个值为false的dropZoeEntered属性，用于表示当前用户没有拖拽任何内容那个到放置区域。
到这里，你已经可以在render方法当中读取this.state,以便向用户展示当前表单中所有数据了。
四、更新状态
更新组件内部状态会出发组件重绘，所以接下来要做的事情就是在拖拽的事件处理器方法中更新状态，然后再次运行render函数，它会从this.state中读取新数据来显示标题，介绍及题目，用户会看到所有内容被正确的更新。
更新组件状态有两种方案：组件的setState方法和repaceState方法。replaceState用一个全新的state对象完整的替换掉原有的state。使用不可变数据结构表示状态时，这种方式很有效，不过很少应用用于其他场景下。更多的情况下回使用setState，它仅仅会把传入的对象合并到已有的state对象。
例如：
getInitialState：funciton(){
return {
dropZoneEntered:false,
title:'Fantastic Survey',
introduction:'This survey isfantastic!',
question :[]
};
}
这时，调用this.setState({title:"Fantasticsurvey 2.0"})仅仅影响this.setState.title的值，而this.state.dropZoneEntered、this.state.introduction及this.state.questions不会受影响。
而如果调用this.replaceState({title:"FantasticSurvey 2.0"}),则会用新的对象{title：“Fantastic Survey 2.0}替换掉整个state对象，同时把this.state.dropZone-Entered]this.state.introduction和this.state.questions全部清除掉。这样做很可能中断render函数执行，因为它期望this.state.questions是一个数组而不是undefined。现在使用this.setState可以实现上文中提到事件处理器方法。
使用this.State可以实现上文提到的事件处理器方法。
handleFormChange:function(formData){
this.setSate(formData);
}.
handleDragOver:function(ev){
//这保证handleDroZoneDrop可以被调用
ev.preventDefault();
},
handleDragEnter:function(){
this.setState({dropZoneEntered:true});
},
handleDragLeave:function(){
this.setState({dropZoneEntered:false});
},
handleDrop:function(ev){
var questionType =ev.dataTransfer.getData('questionType');
var questions =this.state.questions;
questions = questions.concat({type:questionType});
this.setState({
questions:questions,
dropZoneEntered:false
});
});
这一点很重要永远不要尝试通过setState或者replaceState以外的方法去修改state对象，类似this.state.saveInProgress =true通常不是一个好主意，因为它无法通知React师傅需要重新渲染组件，而且可能回答熬制下次调用setState时出现意外结果。
五、事件对象
很多事件处理器只要触发就会完成功能，但有时也会需要关于用户输入的更多信息。例如：
var AnswerEssayQuestion=React.createClass({
handleComplete:functin(event){
this.callMethodOnProps('onCompleted',event.target.value);
},
},
render:function(){
return(
<div className="form-group">
<lavel className="survey-item-label">{this.props.label}</label>
<div className="survey-item-content">
<textarea className="form-control" rows="3"onBlur={this.handleComplete}/>
</div>
</div>
);
}
通常会有一个事件对象传入到React的事件处理函数中，类似于原生的JavaScript事件监听器的写法。这里的handleComplete方法会接受一个事件对象，并通过存取event.target.value值为textarea赋值，在事件处理器中，使用event.target.value获取表单中input值是一个常规的方法，尤其在onClange事件处理器中。
注意：callMethodOnProps是由一个叫做PropsMethodMixin的mixin提供的，此外这个mixin还提供了一些处理父组件之间通信的简便办法。
React把原生的事件封装在一个SyntheticEvent实例中，而不是直接把原生的浏览器事件传给处理器，SyntheticEvent在表现和功能上都与浏览器的原生事件一致，而且消除了跨浏览器差异。
对于用户界面而言，展示只占整体设计因素的一半，另一半则是相应用户输入，即通过JavaScript处理用户产生的事件。
React通过将事件处理器绑定到组建上处理事件，事件触发的同时更新组建的内部状态，内部状态更新会触发组件的重绘。因此，如果视图层想要渲染出事件出发后的结果，它所要做的就是渲染函数中读取组件的内部状态。
一、绑定事件处理器
React处理事件本身和原生的JavaScript事件一样：MouseEvents事件用于点击处理器，Change事件用于表单元素变化，等等，所有事件在命名上与原生的JavaScript规范一致，并且会在相同的情境下被触发，React绑定事件处理器的语法和HTML语法非常相似。比如，在我们的问卷制作工具实例中，包含了下面的代码，在Save按钮上绑定onclick事件处理器。
<button className ='btn btn-save'onClick={this.handleSaveClicked}>Save</button>
用户点击这个按钮时，组件的handleSaveClicked方法会被调用。这个方法中包含处理Save行为的逻辑。
PS：这个代码可在写法上类似普通不推荐的HTML内联事件处理器属性，比如：onClick，但其实在底层实习那上冰没有使用HTML的onClick属性。React只是用这种写法绑定事件处理器，但内部则是按照需要高效的维护着时间处理器。
如果不用JSX语法，你可以选择在参数对象的属性上指定事件处理器，比如：
React.DOM.button({ClassName:'btnbtn-save',onClick:this.handleSaveClicked},"Save");
其中大部分事件不需要而外的处理就可以工作，但是触控事件需要通过调用一下代码手动启动：
React.initializeTouchEvent（true）；
二、事件和状态
1、设想你需要让一个组件随着用户的输入而改变，比如在问卷编辑器中，你想要让用户从一个问题类型的菜单当中拖拽问卷问题。
首先，在渲染函数内部基于HTML5拖放（Drag and Drop）API注册事件处理器，代码如下：
var SurveyEdit =React.creatclass（{
render：function（）{
<div className='survey-edit'>
<div className='row'>
<aside className='sidebar col-md-3'>
<h2>Module</h2>
<DraggableQuestions>
</aside>
<div className='survey-canvas col-md-9'>
<div
className ={'drop-zone well well-drop-zone'}
onDragOver={this.handleDragOver}
onDragEnter={this.handleDragEnter}
onDragLeave={this.handleDragLeave}
onDrop ={this.handleDrop}
>
Drag and drop a module from the left
</div>
</div>
</div>
</div>
}，
}）；
三、根据状态进行渲染
事件处理器方法还需要完成一件事——展开当前已经加入的题目清单。为了实现该功能，你需要充分利用每个React组件的内部状态，组件默认是null，但是可以通过它的getInitialState方法将其出事话为合理的值，比如：
getInitaSate：funciton (){
return {
dropZoneEntered:false，
title：’‘，
introduction：' ',
quesions：【】
}；
}
以上代码组件初始化了默认值：一个空标题、一个空的介绍、一组空的题目以及一个值为false的dropZoeEntered属性，用于表示当前用户没有拖拽任何内容那个到放置区域。
到这里，你已经可以在render方法当中读取this.state,以便向用户展示当前表单中所有数据了。
四、更新状态
更新组件内部状态会出发组件重绘，所以接下来要做的事情就是在拖拽的事件处理器方法中更新状态，然后再次运行render函数，它会从this.state中读取新数据来显示标题，介绍及题目，用户会看到所有内容被正确的更新。
更新组件状态有两种方案：组件的setState方法和repaceState方法。replaceState用一个全新的state对象完整的替换掉原有的state。使用不可变数据结构表示状态时，这种方式很有效，不过很少应用用于其他场景下。更多的情况下回使用setState，它仅仅会把传入的对象合并到已有的state对象。
例如：
getInitialState：funciton(){
return {
dropZoneEntered:false,
title:'Fantastic Survey',
introduction:'This survey isfantastic!',
question :[]
};
}
这时，调用this.setState({title:"Fantasticsurvey 2.0"})仅仅影响this.setState.title的值，而this.state.dropZoneEntered、this.state.introduction及this.state.questions不会受影响。
而如果调用this.replaceState({title:"FantasticSurvey 2.0"}),则会用新的对象{title：“Fantastic Survey 2.0}替换掉整个state对象，同时把this.state.dropZone-Entered]this.state.introduction和this.state.questions全部清除掉。这样做很可能中断render函数执行，因为它期望this.state.questions是一个数组而不是undefined。现在使用this.setState可以实现上文中提到事件处理器方法。
使用this.State可以实现上文提到的事件处理器方法。
handleFormChange:function(formData){
this.setSate(formData);
}.
handleDragOver:function(ev){
//这保证handleDroZoneDrop可以被调用
ev.preventDefault();
},
handleDragEnter:function(){
this.setState({dropZoneEntered:true});
},
handleDragLeave:function(){
this.setState({dropZoneEntered:false});
},
handleDrop:function(ev){
var questionType =ev.dataTransfer.getData('questionType');
var questions =this.state.questions;
questions = questions.concat({type:questionType});
this.setState({
questions:questions,
dropZoneEntered:false
});
});
这一点很重要永远不要尝试通过setState或者replaceState以外的方法去修改state对象，类似this.state.saveInProgress =true通常不是一个好主意，因为它无法通知React师傅需要重新渲染组件，而且可能回答熬制下次调用setState时出现意外结果。
五、事件对象
很多事件处理器只要触发就会完成功能，但有时也会需要关于用户输入的更多信息。例如：
var AnswerEssayQuestion=React.createClass({
handleComplete:functin(event){
this.callMethodOnProps('onCompleted',event.target.value);
},
},
render:function(){
return(
<div className="form-group">
<lavel className="survey-item-label">{this.props.label}</label>
<div className="survey-item-content">
<textarea className="form-control" rows="3"onBlur={this.handleComplete}/>
</div>
</div>
);
}
通常会有一个事件对象传入到React的事件处理函数中，类似于原生的JavaScript事件监听器的写法。这里的handleComplete方法会接受一个事件对象，并通过存取event.target.value值为textarea赋值，在事件处理器中，使用event.target.value获取表单中input值是一个常规的方法，尤其在onClange事件处理器中。
注意：callMethodOnProps是由一个叫做PropsMethodMixin的mixin提供的，此外这个mixin还提供了一些处理父组件之间通信的简便办法。
React把原生的事件封装在一个SyntheticEvent实例中，而不是直接把原生的浏览器事件传给处理器，SyntheticEvent在表现和功能上都与浏览器的原生事件一致，而且消除了跨浏览器差异。
