为了账号安全,请及时绑定邮箱和手机立即绑定

react事件处理为什么推崇显式调用 bind

react事件处理为什么推崇显式调用 bind

慕勒3428872 2019-03-22 19:14:41
react事件处理为什么推崇显式调用 bind
查看完整描述

2 回答

?
呼啦一阵风

TA贡献1802条经验 获得超6个赞

如果你的点击事件触发的方法里需要引用this。就需要绑定啊。不然你的this是null(记得如果没绑定this应该是全局window。但这里this 就是null,撸完手上的需求去看一下react源码 )
所以 你要么在创建的时候绑定:
<div className="save" onClick={this.handleClick.bind(this)}>Save</div>
要么在一开始构造器里声明绑定
constructor(props){
super(props);
this.handleClick=this.handleClick.bind(this)
还有一种是利用闭包把作用域包起来
<div className="save" onClick={()=>this.handleClick}>Save</div>
如果用第一种 会在每次点击时通过bind创建一个新的方法,所以一般用2 3 两种情况,显示调用bind()只是为了保证this值。

查看完整回答
反对 回复 2019-03-26
?
森林海

TA贡献2011条经验 获得超2个赞

官方推荐的是在constructor中bind,或者箭头函数class属性初始化语法。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}



查看完整回答
反对 回复 2019-03-26
  • 2 回答
  • 0 关注
  • 698 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信