Question

我正在尝试使用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
            })
          }

有人可以告诉我为什么即使我做错了我也可以多次检查和取消检查吗？

Answer 1

您忘记将handleCheck添加到您的复选框

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

Answer 2

您正在创建一个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>

ReactJS中的Checkox绑定

2 个答案: