10、事件处理
事件的 this
注意，事件触发的 this，默认指向的 undefined；
所以请手动绑定 this 给事件相应函数。比如：
this.clickCount = this.clickCount.bind(this)
onChange 事件
输入框获取修改后的值，通过 onChange 事件。
假如事件的参数是 e，那么 e.target 获取到当前 DOM（即这个 <input> 标签），然后 e.target.value 获取输入框的值。
但这个时候修改是无效的，因此必须通过 this.setState() 来修改值。
onClick事件
绑定点击事件，通过 onClick 事件。
参数同上，一个道理，但这里不需要。
其他事件
略，事件名和原理是一样的
class HelloWord extends React.Component {
constructor(props) {
super(props);
// 通过 state 设置组件变量
this.state = {
count: 0,
bindValue: ''
}
// 在这里手动绑定 this，原因是不绑定的话，this 将指向 undefined
this.clickCount = this.clickCount.bind(this)
this.changeValue = this.changeValue.bind(this)
}
// 渲染函数，this 指向实例本身
render() {
return <p>
{/* onClick 注意是驼峰写法 */}
<button onClick={this.clickCount}>点击我增加一次点击计数</button>
<p>你已经点击了{this.state.count}次</p>
这个输入框的值和上面的点击次数绑定了，因此无法被手动修改<input type="text" value={this.state.count}/>
{/* 下面这个br标签，必须是闭合标签写法，否则会报错 */}
<br/>
<input type="text" value={this.state.bindValue} placeholder='请在这里输入值' onChange={this.changeValue}/>
<br/>
上面输入框的值是：{this.state.bindValue}
</p>
}
clickCount() {
this.setState({
count: this.state.count + 1
})
}
changeValue(e) {
// e.target 拿到 输入框这个DOM，然后value属性拿到修改后的值
var newValue = e.target.value
console.log(newValue)
// 需要通过 setState 来修改值才能生效
this.setState({
bindValue: newValue
})
}
}
阻止默认事件：
阻止默认事件，需要通过 e.preventDefaul() 来实现（e 是事件的回调函数的参数）
React 事件函数的特点：
事件参数是一个合成事件。React 根据 W3C spec 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题；
在 render 里，写成 this.xx，但是这个事件执行时的 this 是 undefined，所以需要手动绑定（bind）；
事件的传参：
原则上，就是返回一个带参数的函数；
【方法一】
返回通过 bind 绑定了 this 和 参数的函数;
需要注意的是，事件参数无需添加，会被默认后置到最后一个参数的位置：
class HelloWord extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
// 渲染函数，this 指向实例本身
render() {
return <p>
{/* 这种方法省略了 this 绑定的过程 */}
<button onClick={this.clickCount.bind(this, 5)}>增加count</button>
<br/>
计数器二：{this.state.count}
</p>
}
clickCount(number, e) {
// 先是自定义参数，最后一个是事件参数
console.log(arguments)
this.setState({
count: this.state.count + number
})
}
}
【方法二】
参数是一个函数，这个函数里执行了你准备执行的那个函数。
核心思想是：参数函数被执行 ——> 参数函数里执行了原本预期执行的函数 ——> 预期执行的函数里，放置了需要的参数
如代码：
class HelloWord extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
// 渲染函数，this 指向实例本身
render() {
return <p>
{/* 这种方法省略了 this 绑定的过程 */}
<button onClick={e => this.clickCount.call(this, 5, e)}>增加count</button>
<br/>
计数器二：{this.state.count}
</p>
}
clickCount(number, e) {
// 先是自定义参数，最后一个是事件参数
console.log(arguments)
this.setState({
count: this.state.count + number
})
}
}
