Open
Description
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
Labels
No labels