Question

我想知道如何切换反应组件的布尔状态。例如：

我在组件的构造函数中进行了布尔状态检查：

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>

当然我得到一个未捕获的ReferenceError：未定义检查。那我该怎么做呢？

非常感谢提前。

Answer 1

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

在你的情况下：

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

请参阅docs

Answer 2

您应该使用this.state.check代替check.value：

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

但无论如何，这样做是糟糕的做法。将它移到单独的方法并且不直接在标记中编写回调更好。

Answer 3

这是一个使用钩子的示例（需要React> = 16.8.0）

// import React, { useState } from 'react';
const { useState } = React;

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"><div>

Answer 4

使用checked获取值。在onChange期间，checked将为true，它将是boolean的类型。

希望这有帮助！

class A extends React.Component {
  constructor() {
    super()
    this.handleCheckBox = this.handleCheckBox.bind(this)
    this.state = {
      checked: false
    }
  }
  
  handleCheckBox(e) {
    this.setState({
      checked: e.target.checked
    })
  }
  
  render(){
    return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
  }
}

ReactDOM.render(<A/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 5

尝试：

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

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

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

值

Answer 6

您还可以使用React的useState钩子为函数组件声明局部状态。变量toggled的初始状态已作为参数传递给方法.useState。

import { render } from 'react-dom';
import React from "react";

type Props = {
  text: string,
  onClick(event: React.MouseEvent<HTMLButtonElement>): void,
};

export function HelloWorldButton(props: Props) {
  const [toggled, setToggled] = React.useState(false); // returns a stateful value, and a function to update it
  return <button
  onClick={(event) => {
    setToggled(!toggled);
    props.onClick(event);
  }}
  >{props.text} (toggled: {toggled.toString()})</button>;
}


render(<HelloWorldButton text='Hello World' onClick={() => console.log('clicked!')} />, document.getElementById('root'));

https://stackblitz.com/edit/react-ts-qga3vc

Answer 7

当我在使用Redux在React组件中使用切换状态时，我登陆了这个页面，但我在这里找不到任何使用相同方法的方法。

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

我的reducer文件就在这里。我默认情况下得到初始状态 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" />

我的切换弹出功能如下所示，它调用Dispatcher。

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

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

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

谢谢。

Answer 8

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

之前已定义您的属性

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

Answer 9

state = {
  hover: false
}

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

Answer 10

设置：const [state, setState] = useState(1);

切换：setState(state*-1);

使用：state > 0 ? 'on' : 'off';

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

10 个答案: