假设我有这个组件
class Foo extends React.Component {
onClick = () => {
alert('Yay');
this.props.setWhatever()
}
render() {
return (
<Bar>
<input
type='radio'
checked={this.props.getWhatever}
onClick={() => this.onClick()} />
</Bar>
)
}
}
class Bar extends React.Component {
render() {
return (
<label>
{this.props.children}
</label>
)
}
}
在this.onClick()不执行。当我更改onClick={() => this.onClick()}为onClick={this.onClick()}它时，它会以无尽的循环结束。这是为什么？
箭头函数表达式不适合用作方法，并且不能用作构造函数。箭头函数自动绑定this到父/外部组件或定义/执行函数的上下文。
onClick={() => this.onClick()}-点击发生时this
实际上是指输入按钮，而不是您的组件。
onClick={this.onClick()} -在呈现组件后立即创建并执行闭包。
onClick={this.onClick} -单击发生后，将创建并执行一个闭包。请在构造函数中绑定所有函数，并避免使用箭头函数。
constructor(props){this.onClick = this.onClick.bind(this)}
...
onClick() {...}
...
<input onClick={this.onClick} />
请在此处阅读有关箭头功能的更多信息https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
更新：避免在希望this在箭头功能内使用的地方使用箭头功能。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句