时间戳

首页 > 解决方案 > ReactJS 中的 Checkox 绑定

javascript - ReactJS 中的 Checkox 绑定

问题描述

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

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

标签： javascriptreactjsreact-nativecheckbox

解决方案

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

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

推荐阅读