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

JavaScript React.js

村村伽罗Mandy

2020-03-18

我想知道如何切换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:检查未定义那么我该如何实现呢?

提前谢谢了。

第2094篇《如何切换反应组件的布尔状态?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
神无伽罗阳光 2020.03.18

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

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

当我在搜索使用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 })
});

谢谢。

TomNear前端 2020.03.18

尝试:

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

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

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

Eva西里蛋蛋 2020.03.18

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

state = {
  hover: false
}

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

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

在您的情况下:

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

查看文件

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android