javascript - 只是想问一下Button的功能

Question

我是 ReactJs 的初学者。我在构建应用程序时遇到问题。 我的相关代码是

this.state={
  displaySocialInputs: false,
}

我使用按钮切换值。 该按钮性能良好，但无法理解按钮中使用的逻辑。

<button
  type="button"
  onClick={() => {
    this.setState(prevState => ({
      displaySocialInputs: !prevState.displaySocialInputs
    }));
  }}
  className="btn btn-light"
>
  Add Social Networks Links`enter code here`
</button>

我想问按钮如何知道通过在此处输入代码的“prevState”值来更改状态值。我们没有传递任何值。 希望您能理解这个问题。

Answer 1

代码中的此片段:

prevState => ({
  displaySocialInputs: !prevState.displaySocialInputs
})

...是回调。本质上，您是在告诉框架“如果您给我当前状态并将其称为 prevState，这就是我想要对其进行转换的方式”。

你可以这样想:

1. 最初创建组件并将 displaySocialInputs: false 设置为初始状态。该组件会记住这一点。
2. 单击按钮时，将调用 setState。
3. setState 检索当前状态并调用您为其提供的回调，并将该状态作为 prevState 参数传递给您。

由于这种模式，您不必自己给它一个状态:框架会为您做这件事。