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

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
}));

查看文档

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>