React复选框组件需要单击两次才能更改为选中状态

Question

我有一个呈现复选框的React组件。问题是需要两次单击才能变为选中状态，然后再单击两次才能变为未选中状态。

JS：

import React, { Component } from "react";

class CheckboxRow extends Component {
  constructor(props) {
    super(props);
    this.state = { checked: false };
  }

  inputChangedHandler() {
    this.setState({ checked: !this.state.checked });
  }

  render() {
    return (
      <div className="checkbox-row">
        <input
          id={this.props.id}
          type="checkbox"
          onChange={() => this.inputChangedHandler()}
          checked={this.state.checked}
        />
        <label htmlFor={this.props.id} className="checkbox-row__label">
          Label goes here
        </label>
      </div>
    );
  }
}

export default CheckboxRow;

那么，我需要做什么才能使复选框在一次单击时变为选中状态，并在一次单击时变回未选中状态？

Answer 1

在更改状态时，不应直接访问旧状态，如

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

而不是这样做

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

或者从onChange访问传递的事件。这里写成了一个较短的功能组件

function CheckboxRow({ id }) {
  const [checked, setChecked] = useState(false);

  const onChange = event => {
    event.persist();
    setChecked(event.target.checked);
  };

  return (
    <div className="checkbox-row">
      <input id={id} type="checkbox" onChange={onChange} checked={checked} />
      <label htmlFor={id} className="checkbox-row__label">
        Label goes here
      </label>
    </div>
  );
}

Answer 2

盯着它看了几个小时后，我顿时灵光乍现！我有一个onChange格式的prevent.default()！多亏了那些已经回复的人，移除prevent.default()修复了这个问题。