Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio values not stored in Redux #288

Open
depiction opened this issue Mar 4, 2019 · 0 comments
Open

Radio values not stored in Redux #288

depiction opened this issue Mar 4, 2019 · 0 comments

Comments

@depiction
Copy link

depiction commented Mar 4, 2019

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant