reactjs - How to keep only one radio button selected with React -
im trying learn react doing small application it. application has 2 radio buttons , keep 1 of them checked, cannot seem figure out how uncheck other button when select other one. instead both remain selected. here jsfiddle it:
https://jsfiddle.net/4us5us2o/
and here code:
var myradiobutton = react.createclass({ handlechange: function () { this.props.onchange(this.props.myvalue) }, render: function () { return ( <input type="radio" onchange={this.handlechange}>{this.props.myvalue}</input> ) } }); var myapp = react.createclass({ getinitialstate: function () { return { selectedvalue: '' } }, changevalue: function (newvalue) { this.setstate({selectedvalue: newvalue }) }, render: function () { return ( <div> <myradiobutton onchange={this.changevalue} myvalue="a" /> <myradiobutton onchange={this.changevalue} myvalue="b" /><br></br> </div> ) } });
you need provide name attribute on input elements mark them part of same radio button group. standard behavior <input> element type radio.
in example, use:
<input type="radio" name="mygroupname" onchange={this.handlechange}>{this.props.myvalue}</input>
Comments
Post a Comment