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

小能豆

javascript

我想知道如何切换 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。那么我该如何实现呢？

阅读 39

2024-06-10

共1个答案

小能豆

如果新状态更新取决于之前的状态，请始终使用setState接受返回新状态的函数作为参数的函数形式。

就你的情况而言：

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

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

如果您正在使用useState钩子，那么请使用以下代码（以防您的新状态取决于之前的状态）：

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

2024-06-10