14.react事件处理
14.1事件绑定
语法：on+事件名称={事件处理程序}，比如：
onClick={
()=>{
}
}
注意：React事件采用驼峰命名法，比如：onMouseEnter,onFocus
函数组件绑定事件的时候不用this
14.2事件对象
可以通过事件处理程序的参数获取到事件对象
react中的事件对象叫做：合成事件（对象）
可以兼容所有浏览器，无需担心跨浏览器兼容性问题
这是一段阻止冒泡的代码
class App extends React.Component {
handleClick(e) {
// 阻止浏览器的默认行为
e.preventDefault()
console.log('a标签的单击事件触发了')
}
render() {
return (
<a href="http://itcast.cn/" onClick={this.handleClick}>传智播客</a>
)
}
}
15.有状态组件和无状态组件
函数组件又叫无状态组件，类组件又叫有状态组件
状态（state）即数据
函数组件没有自己的状态，只负责数据展示（静态）
类组件又自己的状态，负责更新ul，让页面动起来
16.组件中的state和setState
16.1state的基本使用
状态就是数据，组件内部私有的，只能再组件内使用
state的值是对象，表示一个组件中可以有多个数据
在组件里面这么去创建一个叫count的数据
state = {
count:10
}
然后再在下面用{^实例^.state.count}就可以去获取到了
16.2setState修改状态
状态是可变的
语法：this.setState（
{要修改的数据}·
）
注意：不要直接修改state中的值，这是错误的！
思想：数据驱动视图
类似于这样，每次点击按钮之后count的值就会加一，
每次都会重新获取到最新的count的大小，所以就可以一直加
class App extends React.Component {
state = {
count:0
}
render(){
return(
<div>
<h1>计数器：{this.state.count}</h1>
<button onClick={() => {
this.setState({
count:this.state.count+1,
})
}}>+1</button>
</div>
)
}
17.从jsx中抽离事件处理程序
jsx中掺杂过多js逻辑代码，就会显得非常混乱
推荐：将逻辑抽离到单独的方法中，保证jsx结构清晰
原因：事件处理程序中的this的值为undefined
希望：this指向组件实例（render方法中的this即为组件实例）
18.事件绑定中改变this指向的方法
1.箭头函数
2.Function.prototype.bind()
3.class的实例方法
18.1箭头函数
<button onClick={this.onIncrement}>+1</button>
变成
<button onClick={（）=>this.onIncrement()}>+1</button>
箭头函数中的this指向外部环境，此处指向render（）方法，也就是令this指向当前实例了
18.2用bind的方法解决this指向问题
加入一个es6的constructor方法
constructor(){
super()
this.onIncrement = this.onIncrement.bind(this)
}
这样因为是使用了bind，下面再去onlncrement的时候this就是更改之后的this了
18.3class的实例方法
利用箭头函数形式的class实例方法
此方法为实验性语法，但是，由于babel的存在可以直接使用
直接在方法处理功能那边就改变this了
onIncrement（） {
console.log('事件处理程序中的this',this);
this.setState({
count:this.state.count + 1
})
}
变成
onIncrement = ()=>{
console.log('事件处理程序中的this',this);
this.setState({
count:this.state.count + 1
})
}
这三种最推荐class这种
19.受控组件与非受控组件
19.1受控组件
html中的表单元素是可输入的，也就是有自己的可变状态。但是react中的可变状态都是保存在state中，并且只能通过setState方法来修改，react将state与表单元素value绑定到一起，由state的值来控制表单元素的值
受控组件：其值受到React控制的表单元素
直接
<input type="text" value={this.state.txt} />
就让value值直接等于state的值
这里的话state长这样
state = {
txt:""
}
然后去加入一个onChange事件去监听变化
<input type="text" value={this.state.txt} onChange={this.handleChange}/>
这样就行了
我这边可能要开始看文档了，这个专栏笔记会更慢点了
