Search code examples
reactjsredux-form

reduxform - how to handle change on a radio button using a single handleChange function

I am using redux-form in my Laravel project (implementing React 15.4.2) and the form I have includes several radio buttons. I need a handleChange function in order for these to remember what is checked (if they are changed from a previous value or selected for the first time) but I don't want to have to write a separate one for each radio button, or implement a huge if else set of rules to handle each one.

Here's one of my fields (just the 'yes' value):

<input type="radio" onChange={this.handleChange.bind(this, 'maintain_licence', 'yes')} checked={maintain_licence.value === 'yes'} id="maintain-licence-yes" value="yes" name="maintain_licence" /><span>Yes</span>

And this is what I have for a single radio button on change, based on the radio button called maintain_licence being interacted with:

handleChange(fieldName, value) {
    if(fieldName === 'maintain_licence') {
        this.props.fields.maintain_licence.onChange(value);
    }
}

This works fine - however, since I have about 20 radios in my form, I can imagine this function getting rather long. Ideally, I'd want something similar to:

handleChange(fieldName, value) {
   this.props.fields.fieldName.onChange(value);
}

But as it's trying to find a field actually named 'fieldName' it throws an error stating that it cannot run onChange on an undefined value.

Basically I just need to find a way of using a single function to handle the changes on all radio buttons but I don't know how to do this.

Solution

  • You could use property accessors to get the property you want. Something like:

    handleChange(fieldName, value) {
    this.props.fields[fieldName].onChange(value);
}

    Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors