如何使用react js中的输入复选框返回true或false？

Question

我的输入复选框总是返回真，当我正确地标记它传递一个真，但当我取消标记 tb 我得到真。我希望复选框在选中时返回 true，在未选中时返回 false，这样我将在 handlesubmit 函数中应用我的逻辑。

    handleChange = e => {
        const { name, value } = e.target;
        console.log(name, value);
        switch (name) {

          case 'period': this.json.schedule = 'period'; break;

    }


 <input
       type="checkbox"
       name="period"
       defaultValue
       onChange={this.handleChange}
 />

Answer 1

检查e.target.checked的值。

在您的情况下，更改此行：const { name, value } = e.target 以包含 checked。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true
    }
  }
  
  handleChange = (e) => {
    const { checked } = e.target
    this.setState({
      checked: checked
    })
  }
  
  render() {
    return (
      <div>
        <input type="checkbox"
               onChange={e => this.handleChange(e)}
               defaultChecked={this.state.checked}/>
        {this.state.checked.toString()}
      </div>
    )
  }
}

ReactDOM.render((<App/>), document.getElementById('testing'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="testing"></div>

Answer 2

您首先需要定义考虑什么检查？如果是检查，则为真，如果未检查，则为假。下面是一些帮助您入门的代码。

{   this.state.data.map(function(item, index) { return (
    <input type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/>
  );
      }.bind(this))
}

Answer 3

您没有检查该框是否已选中，请尝试：

handleChange = e => {
    if (document.getElementByClassName("period").checked) {
        // box is checked
    } else {
        // box is unchecked
    }
}