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>

我想问按钮如何知道通过enter code here的“ prevState”值来更改状态值。我们没有传递任何价值。希望你能理解这个问题。

Answer 1

您的代码中的此片段：

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

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

您可以这样认为：

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

由于采用了这种模式，您不必自己给它一个状态：框架会为您完成它。

Answer 2

“切换”在这里完成：

displaySocialInputs: !prevState.displaySocialInputs

！运算符将值从true更改为false，反之亦然，即：

！TRUE =假！FALSE = TRUE

Answer 3

对于您而言，不需要prevstate。

<button
 type="button"
 onClick={() => {
 this.setState({ displaySocialInputs: !this.state.displaySocialInputs });
 }}
className="btn btn-light"
>

但我确实建议您避免在jsx内部创建函数。在您的render方法之外创建一个函数，然后在您的jsx中调用

handleChange = () => {
  this.setState({ displaySocialInputs: !this.state.displaySocialInputs })
}

在渲染中

<button
 type="button"
 onClick={this.handleChange}
 className="btn btn-light"
>

Answer 4

我认为这是可行的，因为setState是一个Promise，因此您正在使用Promise的响应来切换值。我想象prevState包含以前的组件状态。与旧时尚相比，我更喜欢这样做：

this.setState({
   displaySocialInputs:!this.state.displaySocialInputs
})

只是问一下Button中的功能

4 个答案: