react数据绑定和事件绑定
react中属性的命名方式都是小驼峰(如:className、onClick)
1. 数据绑定
react中的数据绑定是使用大括号{}
<div className="content">{aa}</div> // 函数式组件 <div className="content">{this.state.aa}</div> // 类组件
react没有双向绑定,函数式组件得使用hooks,类组件使用状态管理实现双向绑定效果
hooks只能在函数式组件中使用,在类组件中没有效果,hooks就是为了能在函数式组件中使用类组件中的周期函数以及state
2. 事件绑定
函数式组件
onClick={aa} // 或 onClick={()=>{aa()}}
类组件
onClick={this.aa} // 或 onClick={()=>{this.aa()}}
ps:类组件的周期函数中可以直接使用this,this指向当前实例化对象,但是在其他事件函数中使用this的话,要使用.bind(this)或者使用箭头函数,要不然this是undefined,因为绑定onClick相当于将使用中间变量传递实例对象,this指向会丢失。
aa(){ console.log(this); // undefined } bb(){ console.log(this); // 当前实例对象 } cc(){ console.log(this); // 当前实例对象 } ... onClick={this.aa} onClick={this.bb.bind(this)} onClick={()=>{this.cc()}}
3. 事件传递参数
函数式组件
const aa = (e,params)=>{ console.log(e,params); } ... onClick={aa} // 默认隐式传递事件对象e onClick={(e)=>{aa(e,params)}} // 传递事件对象e和参数
类组件
aa = (e,params)=>{ console.log(e,params); } ... onClick={this.aa} // 默认隐式传递事件对象e onClick={this.aa.bind(this,params)} // 传递事件对象e和参数 // 或 onClick={(e)=>{this.aa(e,params)}}
ps:使用箭头函数时事件对象e要显式传递!