I created a conditional field which displays yes and no radio buttons. If Yes is selected then the child ponents should be shown.

The following code acplishes that. The issue is the selection of yes or no is not registered in the redux state. If I remove the onChange function then the redux state is updated with the Yes or No value, but of course the child ponents won't show.

I believe the onChange function I pass is overwriting some other onChange function passed by redux-form. Tried many things but had the same result.

I was thinking of just linking the value property with ReactLink, but it's deprecated.

Using React 0.15, Redux-Form 6.0 alpha, and ES7.

const YesNoRadioButtonGroup = (props) =>
  <RadioButtonGroup {...props}>
    <RadioButton value='Yes' label='Yes' className={s.radio}/>
    <RadioButton value='No' label='No' className={s.radio}/>
  </RadioButtonGroup>

// TODO: Clear child fields when "No" is selected
// TODO: See if we can generalize into ConditionalField
export class ConditionalRadio extends React.Component {

  state = {conditional: false}

  updateConditional(event) {
    console.log(event)
    this.setState({conditional: event.target.value === 'Yes'})
  }

  render() {
    return <div>
      <Field name={this.props.name}
             ponent={YesNoRadioButtonGroup}
             onChange={::this.updateConditional} />  // The trouble line.

      {this.state.conditional ? this.props.children : null}
    </div>
  }
}    

It is used like this:

       <ConditionalRadio name='willRelocate'>
              <Field name='willRelocateTo.withinCurrentState' ponent={Checkbox} label='Within Current State'/>
              <Field name='willRelocateTo.outOfState' ponent={Checkbox} label='Out of State'/>
              <Field name='willRelocateTo.outOfCountry' ponent={Checkbox} label='Out of Country'/>
        </ConditionalRadio>

I created a conditional field which displays yes and no radio buttons. If Yes is selected then the child ponents should be shown.

The following code acplishes that. The issue is the selection of yes or no is not registered in the redux state. If I remove the onChange function then the redux state is updated with the Yes or No value, but of course the child ponents won't show.

I believe the onChange function I pass is overwriting some other onChange function passed by redux-form. Tried many things but had the same result.

I was thinking of just linking the value property with ReactLink, but it's deprecated.

Using React 0.15, Redux-Form 6.0 alpha, and ES7.

const YesNoRadioButtonGroup = (props) =>
  <RadioButtonGroup {...props}>
    <RadioButton value='Yes' label='Yes' className={s.radio}/>
    <RadioButton value='No' label='No' className={s.radio}/>
  </RadioButtonGroup>

// TODO: Clear child fields when "No" is selected
// TODO: See if we can generalize into ConditionalField
export class ConditionalRadio extends React.Component {

  state = {conditional: false}

  updateConditional(event) {
    console.log(event)
    this.setState({conditional: event.target.value === 'Yes'})
  }

  render() {
    return <div>
      <Field name={this.props.name}
             ponent={YesNoRadioButtonGroup}
             onChange={::this.updateConditional} />  // The trouble line.

      {this.state.conditional ? this.props.children : null}
    </div>
  }
}    

It is used like this:

       <ConditionalRadio name='willRelocate'>
              <Field name='willRelocateTo.withinCurrentState' ponent={Checkbox} label='Within Current State'/>
              <Field name='willRelocateTo.outOfState' ponent={Checkbox} label='Out of State'/>
              <Field name='willRelocateTo.outOfCountry' ponent={Checkbox} label='Out of Country'/>
        </ConditionalRadio>

• javascript
• reactjs
• redux-form

Share Improve this question Follow edited Jun 2, 2016 at 19:19 BAR asked Jun 2, 2016 at 19:07 BARBAR 17.3k2727 gold badges106106 silver badges207207 bronze badges 4

• 1 Thats very possible github./erikras/redux-form/blob/… – Avraam Mavridis Commented Jun 2, 2016 at 19:22
• @AvraamMavridis That was a fast find. Would this be a bug? Any idea where to look for a work around? – BAR Commented Jun 2, 2016 at 19:24
• according to the docs/examples you dont need to maintain state internally in the ponent redux-form./5.2.5/#/examples/simple?_k=g779uz, is it a reason you need that? It should be doable to achieve what you want by "listening" on the store/passed params. – Avraam Mavridis Commented Jun 2, 2016 at 19:31
• @AvraamMavridis Just keeping the state to determine whether to show child fields. (using version 6 btw, it is in alpha) – BAR Commented Jun 2, 2016 at 19:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

If you have defined the field name when creating your redux-form, then you just have to call the default onChange event for that field inside your custom change event handler.

In your case that should be:

  updateConditional(event) {
    this.setState({conditional: event.target.value === 'Yes'});
    this.props.fields.name.onChange(event);
  }

Did you try to use the function ponentWillReceiveProps in which you can check the new value then set the new conditional? see all helpful React lifecycle functions here

Your Component would be written like this:

export class ConditionalRadio extends React.Component {

  state = {conditional: false}

  ponentWillReceiveProps(nextProps) {
    const displayChildren = nextProps.**value of the radio from redux form STORE** === 'Yes'
    this.setState({conditional: displayChildren});
  }

  render() {
    return (
      <div>
        <Field name={this.props.name}
               ponent={YesNoRadioButtonGroup}/>
          {this.state.conditional ? this.props.children : null}
      </div>
    )
  }
} 

This works well:

class YesNoRadioButtonGroup extends React.Component {

  handleChange(event) {
    // Call the event supplied by redux-form.
    this.props.onChange(event)

    // If custom handler exists, call it.
    if (this.props.hasOwnProperty('customHandler')) {
      this.props.customHandler(event)
    }
  }

  render() {
    return <RadioButtonGroup {...this.props} onChange={::this.handleChange}>
        <RadioButton value='Yes' label='Yes' className={s.radio}/>
        <RadioButton value='No' label='No' className={s.radio}/>
      </RadioButtonGroup>
  }
}