CODEWITHSUNDEEP
reactjseventsradio-buttonchecked
jaimefps
jaimefps

Reputation: 2414

React Radio Button event on "checked" attribute

I'm trying to handle an event based on the 'checked' attribute of a radio button in React.js. I want the buttons to allow for selecting more than one value, so I removed the 'name' attribute which seemed to disallow multiple selections.

The base radio button component looks like 

export function Radio_Button_Multiple_Selection (props) {
  return (
    <label>
      <input  type="radio"
              checked={props.form_data[props.field_name].indexOf(props.btn_value) > -1}
              onClick={props.radio_effect} />
      {props.btn_value}
    </label>
  )
}

I have a form_data objec that has an array of values that correspond to the btn_value of the radio buttons, where if the value is found in the array it should come up as checked. (And this part is working fine right now, they do in fact show up checked as expected):

const form_data = {
...
  occupations: ['student', 'merchant', 'paladin', 'troll'],
...
}

Now, I also have a react class with a method for manipulating the values in the occupations array,responding to whether the radio button being licked was already checked or not:

handleRadioButton (event) {
  const target = event.target;
  const value = target.value;
  const isChecked = target.checked;
  console.log(isChecked) // this undefined. why?!?
  if (isChecked) {
    // remove it from array
    // etc.
  } else {
    // add it to array
    // etc.
  }
}

My main issue is that following:

When I console.log the "checked" logic that returns a boolean inside the RadioButton component's checked attribute, it comes up as expected (true of false if it is or isnt in the array). But it always comes up as checked = undefined in the class method for handling the buttons.

Upvotes: 1

Views: 9228

Answers (2)

jaimefps
jaimefps

Reputation: 2414

I found the workaround:

use the 'value' attribute to store the same information that I am storing under the 'checked' attribute, with an array that has the button's value AND the checked logic boolean; e.g., value=[boolean, btn_value]

then access the 'value' attribute in the event handler. the value arrives as a full string, so I just split it at the comma and work from there.

it's hacky, but it worked.

Upvotes: 0

webdeb
webdeb

Reputation: 13211

You cannot uncheck a radio button in HTML either. You have to control the checked attribute with your props or state:

Even more, you should rely only on your state, instead of a mix, e.target.checked & state.

class Radio extends Component {
  state = {}

  render() {
    return <input
      type="radio"
      checked={this.state.checked}
      onClick={e => this.setState({
        checked: !this.state.checked
      })}
    />
  }
}


<input type="radio" />

Upvotes: 1

Related Questions