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

javascript reactjs

2022-08-30 02:36:25

我想知道如何切换 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>

当然，我得到了一个未捕获的引用错误：检查未定义。那么我该如何做到这一点呢？

答案 1

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

在您的情况下：

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

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

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

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

答案 2

您应该使用而不是在这里：this.state.checkcheck.value

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

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

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

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