Trying React radio but the strange thing is that the radio selection will not update its view. Can anyone take a look at the code below and let me know what's wrong?
class Test extends React.Component {
constructor(props){
super(props);
this.state = {
radioVal: "first"
}
}
handleRadioSelection(e){
e.preventDefault();
this.setState({
radioVal:e.target.value
})
}
render(){
return (
<div>
<label>
<input type="radio" onChange={this.handleRadioSelection.bind(this)}
checked={ this.state.radioVal==="first"}
value="first"
name="radio1" /> 1 <br />
</label>
<label>
<input type="radio" onChange={this.handleRadioSelection.bind(this)}
checked={this.state.radioVal==="second"}
value="second"
name="radio1" /> 2 <br />
</label>
{ "Selected: " } {this.state.radioVal}
</div>
)
}
}
React.render(<Test />, document.getElementById('container'));
Remove e.preventDefault();
from handleRadioSelection
. Is there a reason why you added that line in the first place?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With