Reactjs React Checkbox组件点击两下即可更改为checked

我有一个React组件，它呈现一个复选框。问题是，需要单击两下才能转到选中状态，然后单击两下才能更改为未选中状态

JS:

import React，{Component}来自“React”；
类CheckboxRow扩展组件{
建造师（道具）{
超级（道具）；
this.state={checked:false}；
}
inputChangedHandler（）{
this.setState（{checked:！this.state.checked}）；
}
render（）{
返回(
this.inputChangedHandler（）}
checked={this.state.checked}
/>
标签在这里
);
}
}
导出默认复选框行；

---

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

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

this.setState（{checked:！this.state.checked}）；

取而代之的是

this.setState（（{checked}）=>（{checked:！checked}））；

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

函数CheckboxRow（{id}）{
const[checked，setChecked]=使用状态（false）；
const onChange=事件=>{
event.persist（）；
setChecked（event.target.checked）；
};
返回(
标签在这里
);
}

盯着它看了几个小时后，我有了一个妙不可言的瞬间！我有一个

prevent.default（）

格式的

onChange

！删除

prevent.default（）

修复了它，这多亏了那些回复者。

您使用的是哪个浏览器？。我在FireFox的chromeWorks中运行它，tooThat不是唯一的问题，请看我的回答谢谢！我解决了我自己的问题，问题归结为表单本身的

prevent.default（）

。我已经做了你建议的更改，谢谢你。@Mark很棒，很乐意帮忙！让我们将其标记为已解决：）

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;