CODEWITHSUNDEEP
javascriptreactjs
David
David

Reputation: 323

React 16 Radio Button onChange not working

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>

Upvotes: 4

Views: 20862

Answers (2)

Dinesh M
Dinesh M

Reputation: 65

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>

Upvotes: -2

Shubham Khatri
Shubham Khatri

Reputation: 281656

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

Upvotes: 9

Related Questions