javascript - React 16 Radio Button onChange not working - Stack Overflow

admin管理员组

文章数量:1278789

I tried several solutions to the following forms but had no luck. I want to send the value a radio button back to my Redux store using a function, updateCategory(), passed as a prop, but I can't get the onChange to fire. Also, how would I pass the value of a radio button as a param instead of typing the value out? 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>

I tried several solutions to the following forms but had no luck. I want to send the value a radio button back to my Redux store using a function, updateCategory(), passed as a prop, but I can't get the onChange to fire. Also, how would I pass the value of a radio button as a param instead of typing the value out? 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>

• javascript
• reactjs

Share Improve this question Follow edited Mar 4, 2018 at 7:55 knoxgon 1,24333 gold badges1919 silver badges3333 bronze badges asked Mar 4, 2018 at 7:02 DavidDavid 32333 gold badges88 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

For a radio button, onChange event will trigger for the radio that was previously checked as well as the one that is currently checked. You can do the following to confirm that the correct radio is 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>

Also, you need to make sure that your input is controlled input with the checked value ing from props or state and not a static one, because if you write checked={true}, your radio button will always stay true. You need to store the checked state and then update it like

checked={this.props.checked}

More info about Controlled Components can be found here.

---

As an alternative, you can also have the input as uncontrolled ponents and write them like

<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>

More info about Uncontrolled Components.

DEMO of Uncontrolled input

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>

本文标签： javascriptReact 16 Radio Button onChange not workingStack Overflow