React 手动实现 this 的绑定的几种方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 手动实现 this 的绑定的几种方法相关的知识，希望对你有一定的参考价值。
一 ：bind 方法。在{}中,这个方法可以帮助我们绑定事件处理器内的 this ，并可以向事件处理器中传递参数
class Hello extends React.Component {
//最后一个参数是事件对象
handleClick(param1,param2,event){
alert(param1+"："+param2 + ":"+event);
}
render() {
//通过bind(),可以传递单个或多个参数
return <div onClick = {this.handleClick.bind(this,'test','test2')}>
Hello {this.props.name}
</div>;
}
}
二 ： 如果方法只绑定，不传参，可以使用双冒号语法，
class Hello extends React.Component {
handleClick(event){
alert(event);
}
render() {
//类似于{this.xxx.bind(this)}
return <div onClick = {::this.handleClick}>
Hello {this.props.name}
</div>;
}
}
三 :constructor构造器内声明,
在组件的构造器内完成了 this 的绑定，这种绑定方式的好处在于仅需要进行一次绑定，而不需要每次调用事件监听器时去执行绑定操作
class Hello extends React.Component {
constructor(arg){
super(arg);
//参数传递跟一类似
this.handleClick = this.handleClick.bind(this,'test');
}
handleClick(arg,e){
alert(arg+":"+e);
}
render() {
return <div onClick = {this.handleClick}>
Hello {this.props.name}
</div>;
}
}
五 : 使用箭头函数的特性: 自动绑定了定义此函数作用域的 this
class Hello extends React.Component {
constructor(arg){
super(arg);
}
handleClick(arg,e){
alert(arg+":"+e);
}
render() {
//e为事件对象
return <div onClick = {(e)=>{this.handleClick('test',e)}}>
Hello {this.props.name}
</div>;
}
}
或者:
class Hello extends React.Component {
constructor(arg){
super(arg);
}
handleClick = (e)=>{
alert(e)
}
render() {
return <div onClick = {this.handleClick}>
Hello {this.props.name}
</div>;
}
}
以上是关于React 手动实现 this 的绑定的几种方法的主要内容，如果未能解决你的问题，请参考以下文章
React事件方法React定义方法的几种方式获取数据改变数据执行方法传值