javascript - React:处理事件 - 参数可见性
问题描述
我正在关注 React Doc。在“处理事件”部分,有以下代码段。
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(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
在handleClick()
功能state
上,它如何访问?为什么不this.state
呢?
解决方案
因为它是一个函数参数。在这段代码中:
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
这部分是一个箭头函数,它将组件的先前状态作为参数:
state => ({
isToggleOn: !state.isToggleOn
})
并返回一个新的状态,触发重新渲染等等。
为什么不是 this.state?
经验法则:如果你的下一个状态依赖于前一个状态,你必须使用这种方法来更新你的状态。this.setState
所以你不会因为调用是异步函数而遇到竞争条件。
希望能帮助到你 :)
推荐阅读
- sql - 案例陈述同一列
- javascript - 如何为向下滚动到最后的 Chrome 扩展程序编写 JavaScript 代码(我想获取所有 Facebook 好友列表)
- c++ - 执行一对一多线程时如何防止竞争条件
- python - 返回函数到 luigi 输出方法
- javascript - 将字符串转换为 jQuery 淡出的正确格式
- java - 将完整集合排序与二进制插入排序到新集合中
- javascript - AppScript 在发送电子邮件后更新每一行状态
- asp.net - 冻结 Gridview 标题
- sql - 为什么在 WHERE 子句中忽略 OR?
- html - 在 onlick 提交重定向之前验证所需的输入