时间戳

首页 > 解决方案 > React 中的这个 handleClick 函数如何检索先前的状态值？

javascript - React 中的这个 handleClick 函数如何检索先前的状态值？

问题描述

此codepen将按钮值从 切换true到false。

除了这个handleClick功能是如何工作的，我理解这一点：

 handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

有人可以将其分解并简单地解释该函数如何检索isToggleOn布尔值吗？

我知道我们不能直接使用!this.state.isToggleOninsetState但是有人可以简单地解释一下为什么这个handleClick函数在这种情况下对于 React 新手来说更可靠吗？

这是handleClick调用函数的地方：

render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );

标签： javascriptreactjs

解决方案

从setState文档：

第一个参数是一个带有签名的更新函数：

(state, props) => stateChange

state是对应用更改时的组件状态的引用。

在您的示例prevState中已state重命名，它包含状态中的所有分配，包括isToggleOn.

您也可以只读取函数this.state。setState该prevState模式用于传达这是旧/当前状态，即正在更改的状态。

设置状态文档

推荐阅读