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}/>
这样就行了
我这边可能要开始看文档了,这个专栏笔记会更慢点了