一、事件处理
1、React事件和DOM事件
事件对比.png
onClick={this.handle}
doSomething(){
if(count<0){
count = 0;
}
}
handle(ev){
// console.log(ev)
count--;
this.doSomething(); // 会报错哦
}
2、this关键字的问题
面向对象编程中this的问题：js中this会随引用对象的差别而有不同。
解决方法：
（1）JSX中使用bind方法
<button onClick={this.handle.bind(this)} type="button">减</button>
（2）在构造函数中使用bind方法
constructor(props){
super(props)
this.handle = this.handle.bind(this);
}
（3）使用箭头函数（推荐）
handle=(ev)=>{
count--;
this.doSomething();
}
3、向事件处理程序传递参数
onClick={this.handle.bind(this,9)}或
onClick={(ev)=>{ this.handle(this.props.data.id,ev) }}
4、向父组件传递参数
在父组件定义好事件处理函数，并通过props向子组件传递。
// 子组件
<button onClick={()=>{ this.props.onDelete(this.props.data.id)}}>删除</button>
// 父组件
handleDelete = id =>{
console.log('id: ',id);
}
renderList(){
return listData.map(item=>{
return (
<ListItem
key={item.id}
data={item}
onDelete={this.handleDelete} // 看这里哦~
/>
)
})
}
5、React事件机制
（1）DOM事件机制
先进入捕获过程，父级元素将事件一直传递到事件发生的元素；然后执行事件处理；再进入冒泡阶段，将事件向外层传递。也就是将子元素的事件委托给父元素进行处理。
DOM事件机制.png
（2）React事件机制
react将事件都绑定在document上，统一使用事件监听，并在冒泡阶段处理事件。当挂载 / 卸载组件时，只需在统一的事件监听位置增加或删除对象即可。
事件触发时，组件会生成一个合成事件，传递到document中；document通过dispatch Event回调函数依次执行dispatch listener中同类型事件的监听函数。
事件注册是在组件生成时，将virtual dom中所有事件对应的原生事件都注册在一个监听器listenerBank中，并以key作为索引。这样就将将可能要处理的事件进行了分类。
React事件机制.png
（3）要素：
※ React事件是合成事件，不是DOM原生事件
※ 在document监听所有支持事件
※ 使用统一的分发函数dispatchEvent
