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

当切换布尔值时，我发现这是最简单的。简单地说，如果该值已经为true，则将其设置为false，反之亦然。当心未定义的错误，请确保在执行之前定义了属性

this.setState({
   propertyName: this.propertyName = !this.propertyName
});

当我在搜索使用Redux的React组件中使用切换状态时，我就进入了此页面，但在这里我找不到使用相同状态的任何方法。

因此，我认为这可能会帮助那些努力使用Redux实现切换状态的人。

我的减速器文件在这里。默认情况下，我将初始状态设置为false。

const INITIAL_STATE = { popup: false };
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "POPUP":
            return {
                ...state,
                popup: action.value
            };
        default:
            return state;
    }
    return state;
};

单击图像时更改状态。因此，我的img标签带有onClick函数。

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

我的Toggle Popup函数位于下面，该函数称为Dispatcher。

const togglePopup = ev => {
    ev.preventDefault();
    props.handlePopup(!props.popup);
};

该调用转到mapDispatchToProps函数下面，该函数反映回切换状态。

const mapDispatchToProps = dispatch => ({
    handlePopup: value => dispatch({ type: "POPUP", value })
});

谢谢。

尝试：

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

使用check: !check.value表示它正在寻找check尚未声明的对象。

您需要指定您想要相反的值this.state.check。

根据您的环境；给定mouseEnter函数，这将允许您更新状态。无论哪种方式，都可以通过将状态值设置为true：false来更新给定功能的状态值，方法是使用!this.state.variable

state = {
  hover: false
}

onMouseEnter = () => {
  this.setState({
    hover: !this.state.hover
  });
};

由于没有人发布此消息，因此我发布了正确的答案。如果您的新状态更新取决于先前的状态，请始终使用其函数形式setState接受返回新状态的函数作为参数。

在您的情况下：

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

查看文件