React 16单选按钮onChange不起作用

Question

我尝试了以下形式的几种解决方案，但是没有运气。我想使用updateCategory(),作为道具传递的函数将值单选按钮发送回我的Redux存储，但是我无法触发onChange。另外，如何将单选按钮的值作为参数传递，而不是键入该值？IE浏览器this.props.updateCategory('health')

 <form className="form-inline my-2 my-lg-0">
    <div className="btn-group" data-toggle="buttons">
      <label className="btn btn-secondary active">
        <input
          type="radio"
          name="options"
          value='health'
          checked={false}
          onChange={() => this.props.updateCategory('health')} /> Health
      </label>
      <label className="btn btn-secondary">
        <input
          type="radio"
          name="options"
          value='tattoo'
          checked={true}
          onChange={() => this.props.updateCategory('tattoo')} /> Tattoo
    </label>
    </div>
  </form>

Answer 1

用于无线电按钮，onChange事件将触发，这是无线电previously checked，以及所述一个是currently checked。您可以执行以下操作以确认检查了正确的无线电

updateCategory = (e) => {
    if(e.target.checked) {
       this.props.updateCategory(e.target.value)
    }
}

<form className="form-inline my-2 my-lg-0">
    <div className="btn-group" data-toggle="buttons">
      <label className="btn btn-secondary active">
        <input
          type="radio"
          name="options"
          value='health'
          defaultChecked
          checked={this.props.checked === "health" }
          onChange={this.updateCategory} /> Health
    </label>
      <label className="btn btn-secondary">
        <input
          type="radio"
          name="options"
          value='tattoo'
          checked={this.props.checked === "tattoo"}
          onChange={this.updateCategory} /> Tattoo
    </label>
    </div>
  </form>

另外，您还需要确保输入是受控输入，其检查值来自props或state，而不是静态值，因为如果编写checked={true}，则单选按钮将始终保持为true。您需要存储选中状态，然后像更新它一样

checked={this.props.checked}

或者您可以将输入作为不受控制的组件并像这样编写

<form className="form-inline my-2 my-lg-0">
    <div className="btn-group" data-toggle="buttons">
      <label className="btn btn-secondary active">
        <input
          type="radio"
          name="options"
          value='health'
          defaultChecked
          onChange={this.updateCategory} /> Health
    </label>
      <label className="btn btn-secondary">
        <input
          type="radio"
          name="options"
          value='tattoo'
          onChange={this.updateCategory} /> Tattoo
    </label>
    </div>
  </form>

不受控制的输入的演示