javascript - 复选框每次都需要点击两次才能检查

Question

我目前正在运行一个反应应用程序，它有一个如下所示的复选框：

<input name="~" classsName="~" type="checkbox" onChange={this.onToggle}/>

该onToggle函数如下所示：

onToggle = (e) => {
    const { value } = suppressEvent(e).target;
    const newState = {...this.state, checkboxOn:value}
    this.setState(({ newState }) => ({ newState: !newState}));
}

问题是在网页上，复选框每次单击两次后才会切换其状态。关于如何在单击后进行切换的任何想法？提前致谢 ：）

标签： javascripthtmlreactjs

Answer 1

要解决您的问题，请尝试像这样重写您的组件：

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true
    };
    this.onToggle = this.onToggle.bind(this);
  }

  onToggle() {
    this.setState((prevState) => {
      return { checked: !prevState.checked };
    });
  }

  render() {
    return (
      <div>
        <div>
          <input name="~" className="~" type="checkbox" checked={this.state.checked} onChange={this.onToggle} />
          <label htmlFor="~">Checkbox</label>
        </div>
        <pre>{JSON.stringify({ state: this.state }, null, 2)}</pre>
      </div>
    );
  }
}

ReactDOM.render(<Checkbox />, document.getElementById("root"));

.App { font-family: sans-serif; }
pre { background: #efefef; padding: 20px; }

<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="root"></div>