Question

我尝试了以下几种形式的解决方案，但没有运气。我想使用函数updateCategory(),将一个单选按钮发送回我的Redux商店作为道具，但是我无法触发onChange。另外，我如何将单选按钮的值作为参数传递而不是输入值？ I.E. 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>

此外，您需要确保输入是受控输入的，检查值来自道具或状态，而不是静态值，因为如果您写checked={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>

<强> DEMO of Uncontrolled input

Answer 2

只需将onChange添加到输入div，如：

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

然后添加此功能

  radioButtons(event) {
    console.log(event.target.value, 'Checked input')
    this.props.updateCategory(event.target.value)
  }

Answer 3

handleChange = (e) => {
        e.preventDefault();
        const { name,value } = e.target;
        this.setState({ 
            [e.target.name]: 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
          onChange={this.handleChange} /> Health
    </label>
      <label className="btn btn-secondary">
        <input
          type="radio"
          name="options"
          value='tattoo'
          onChange={this.handleChange} /> Tattoo
    </label>
    </div>
  </form>

React 16单选按钮onChange不起作用

3 个答案: