我想知道如何切换React组件的布尔状态.例如:
我在组件的构造函数中进行了布尔状态判断:
constructor(props, context) {
super(props, context);
this.state = {
check: false
};
};
每次单击复选框时，我都会try 使用this.setState方法切换状态:
<label>
<input
type=checkbox"
value="check"
onChange={(e) => this.setState({check: !check.value})}
/>
Checkbox
</label>
我当然得了Uncaught ReferenceError: check is not defined分.
因为没有人发布这篇文章，所以我发布了正确的答案.如果新状态更新依赖于以前的状态，请始终使用函数形式setState，它接受一个返回新状态的函数作为参数.
就你而言:
this.setState(prevState => ({
check: !prevState.check
}));
见docs
Since this answer is becoming popular, adding the approach that should be used for React Hooks (v16.8+):
如果您使用的是useState钩子，那么请使用以下代码(如果您的新状态取决于以前的状态):
const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => !prevCheck);