Open chipit24 opened 7 years ago
Running into the exact same, issue, did you find a solution?
Isn't that the same project?
Whoops, I thought I was replying to another issue - I removed my comment. I never resolved the issue. I ended up building a different component and not using radio buttons.
I found the same problem was happening, so I decided to use the onClick
handler, as an attribute of each Radio element, rather than the onChange
handler, as an attribute of the RadioGroup element, and hey presto, everything worked perfectly:
const enableprofanityfilter = this.props.enableprofanityfilter;
<RadioGroup name="radio-yes-no" value={enableprofanityfilter}>
<Radio
value="1"
ripple
onClick={this.props.toggleEnableprofanityfilter.bind(this,1)}
>
Yes
</Radio>
<Radio
value="0"
ripple
onClick={this.props.toggleEnableprofanityfilter.bind(this,0)}
>
No
</Radio>
</RadioGroup>
Here is the code for the sample app:
I have the test app up on GitHub as well: https://github.com/chipit24/react-mdl-radio-group-test
If you run the app, what you will notice is that the
selectedOption
in state is correctly updated, but the radio button state does not change; the first radio button ("one") will remain selected.This appears to be caused by the fact that I'm storing the RadioGroup JSX inside of the state (however, the issue is the same if I store it as an instance variable).
I need to be able to dynamically generate and pass the RadioGroup component to other props in an app which I'm working on. How can I get around this issue?