如何切换 React 组件的布尔状态？

Question

我想知道如何切换 React 组件的布尔状态。例如：

我在组件的构造函数中有一个布尔状态检查：

constructor(props, context) {
   super(props, context);

   this.state = {
      check: false
   };
};

每次单击复选框时，我都尝试使用 this.setState 方法切换状态：

<label>
  <input
    type=checkbox"
    value="check"
    onChange={(e) => this.setState({check: !check.value})}
  />
  Checkbox
</label>

当然我得到一个 Uncaught ReferenceError: check is not defined 。

那么我该如何实现呢？

原文由 noob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于没有人发布此内容，因此我发布了正确答案。如果您的新状态更新依赖于先前的状态，请始终使用 setState 的函数形式，它接受一个返回新状态的函数作为参数。

在你的情况下：

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

查看 文档

---

由于这个答案越来越流行，添加应该用于 React Hooks (v16.8+) 的方法：

如果您正在使用 useState 挂钩，请使用以下代码（以防您的新状态依赖于先前的状态）：

 const [check, setCheck] = useState(false);
 // ...
 setCheck(prevCheck => !prevCheck);

原文由 Dane 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您应该在此处使用 this.state.check 而不是 check.value ：

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

但无论如何，这样做是 不好的做法。最好将它移动到单独的方法并且不要直接在标记中编写回调。

更新： 正如评论中指出的那样，由于 React 的状态是异步的，这种方法可能会导致意想不到的结果。在这种情况下正确的方法是使用回调：

 this.setState(({ check }) => ({ check: !check }));

原文由 Eugene Tsakh 发布，翻译遵循 CC BY-SA 4.0 许可协议