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

React 事件处理为什么推荐调用 bind

React 事件处理为什么推荐调用 bind

至尊宝的传说 2019-05-31 03:02:55
React 事件处理为什么推荐调用 bind
查看完整描述

3 回答

?
喵喔喔

TA贡献1735条经验 获得超5个赞

官方推荐的是在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-06-01
?
狐的传说

TA贡献1804条经验 获得超3个赞

如果你的点击事件触发的方法里需要引用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-06-01
?
慕桂英3389331

TA贡献2036条经验 获得超8个赞

body事件是要到componentDidMount绑定没错,我是没看到问题中的代码,大概有用了jQuery的bind与unbind,事件的顺序会不正确。 在组件的onClick事件里取消事件委托

查看完整回答
反对 回复 2019-06-01
  • 3 回答
  • 0 关注
  • 391 浏览
慕课专栏
更多

添加回答

举报

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