Skip to content

Radio values not stored in Redux #288

Open
@depiction

Description

@depiction

I'm trying to get a radio group working. I started with the radio example in the documentation, but as indicated in #257, the labels don't appear.

I got labels to appear using the following code:

<Field name='color' id='color' component={RadioGroup}>
    <FormControlLabel value='blue' control={<Radio color='primary' />} label='Blue' />}
    <FormControlLabel value='green' control={<Radio color='primary' />} label='Green' />}
    <FormControlLabel value='red' control={<Radio color='primary' />} label='Red' />
</Field>

It looks and functions great, but when a radio option is clicked, the value doesn't appear in Redux. When the field's value changes, the value in Redux should automatically update.

For now, I was able to get around the problem by manually creating an onChange event that updates the value in Redux. I then had to add logic to the render method to determine if the option is checked or not.

export class MyForm extends React.Component {

    handleRadioChange = name => (event) => {
        this.props.dispatch(change('dtcPaymentForm', name, event.target.value))
    }

    handlePost = input => {
    }

    render () {
        const { handleSubmit, invalid, color } = this.props

        return (
            <form onSubmit={handleSubmit(this.handlePost)}>
                <Field name='color' id='color' component={RadioGroup}>
                    <FormControlLabel value='blue' control={<Radio onChange={this.handleRadioChange('color')} checked={(color === 'blue')} color='primary' />} label='Blue' />}
                    <FormControlLabel value='green' control={<Radio onChange={this.handleRadioChange('color')} checked={(color === 'green')} color='primary' />} label='Green' />}
                    <FormControlLabel value='red' control={<Radio onChange={this.handleRadioChange('color')} checked={(color === 'red')} color='primary' />} label='Red' />
                </Field>
                <Button className={classes.button} disabled={invalid || isLoading} type='submit' variant='contained' color='primary' fullWidth>
                    Submit
                </Button>
            </form>
        }
    }
}

const selector = formValueSelector('myForm')

const mapStateToProps = (state) => ({
    color: selector(state, 'color')
})

export default compose(
    connect(mapStateToProps, null),
    reduxForm({
        form: 'myForm'
    })
)(MyForm)

The package.json file includes

  • react ^16.5.1
  • react-redux ^5.0.7
  • redux ^3.7.2
  • redux-form ^7.4.2
  • @material-ui/core ^3.9.0
  • redux-form-material-ui v^5.0.0-beta.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions