Check which Radio button is Selected or Clicked
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script data-require="babel@*" data-semver="5.6.15" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script data-require="react@*" data-semver="0.13.3" src="https://fb.me/react-0.14.3.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
var GetResult = React.createClass({
getInitialState: function () {
return {
gender: '',
};
},
onSiteChanged: function (e) {
this.setState({
gender: e.currentTarget.value
});
},
render: function(){
var resultRows = this.props.data.map(function(result){
return (
<tbody>
<tr>
<td><input type="radio" name="gender_name"
value={result.GENDER_NAME}
checked={this.state.gender === result.GENDER_NAME}
onChange={this.onSiteChanged} />{result.GENDER_NAME}{resultRows}{this.state.gender}{
render: function(){
return <div><GetResult data={[
{GENDER_NAME: 'Male'},
{GENDER_NAME: 'Female'}
]}/></div>
}
});
React.render(<App />, document.getElementById('root'));
</script>
</html>
Most Helpful This Week
Component displays Height and Width on window resize
Glyphicon Rating Star component
Using this keyword access component properties and methods
How to use arrow function in React stateless components?
How to create simple React Router to navigate multiple pages?
How to pass an Argument to a Method used inside JSX expression?
Working with Forms, Inputs and onChange Events in ReactJs
How to create Functional Component?
Example of React JS with Material UI components
How to render raw HTML content in React JS?