React JS 中的复选框绑定答案

【问题标题】：Checkox binding in ReactJSReact JS 中的复选框绑定
【发布时间】：2018-12-29 19:11:13
【问题描述】：

我正在尝试使用 reactJS 创建一个简单的复选框，并尝试使用 handlecheck() 绑定复选框的状态

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Getting Started with React</title>
</head>
<body>
  <div id='react-container'></div>
  <script type="text/babel">
    
    class Checkbox extends React.Component{
      constructor(props){
        super(props)
        this.state = {
          checked: false
        }
        this.handleCheck = this.handleCheck.bind(this)
      }

      handleCheck(){
        this.setState ({
          checked: true
        })
      }

      render(){
        return(
          <div>
            <input type = "checkbox"/>
          </div>
        )
      }
    }

    ReactDOM.render(
      <Checkbox />,
      document.getElementById("react-container")
    )
  </script>

</body>
</html>

但是，即使我正在使用这里

handleCheck(){
                this.setState ({
                  checked: true
                })
              }

我仍然可以多次选中和取消选中该框，但实际上，它不应该，因为它必须检查一次并且应该停止。我知道在实际场景中应该是这样的：

handleCheck(){
            this.setState ({
              checked: !this.state.checked
            })
          }

有人可以告诉我为什么即使我做错了，我也可以多次选中和取消选中？

【问题讨论】：

标签： javascript reactjs react-native checkbox

【解决方案1】：

您正在创建一个controlled component，它需要一个处理程序来更改状态，它的值/检查属性由状态控制。

您需要将this.handleCheck 指定为onChange 处理程序，并将this.state.checked 指定为checked 属性值：

class Checkbox extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: false
    }
    this.handleCheck = this.handleCheck.bind(this)
  }

  handleCheck() {
    this.setState({
      checked: true
    })
  }

  render() {
    return (
      <div>
        <input 
          type="checkbox" 
          checked={this.state.checked}
          onChange={this.handleCheck}
          />
      </div>
    )
  }
}

ReactDOM.render( 
  <Checkbox /> ,
  document.getElementById("react-container")
)

<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='react-container'></div>

【讨论】：

【解决方案2】：

您忘记在复选框中添加handleCheck

<div>
  <input type = "checkbox" onChange={this.handleCheck} checked={this.state.checked}/>
</div>

【讨论】：