Golang React JS Technology Blog

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}</td>                            
                        </tr>
                   </tbody>
               );
           }, this);
           return (
               <table className="table">
                   <thead>
                       <tr>
                           <th>Select Gender</th>                           
                       </tr>
                   </thead>
                    {resultRows}
                   <tfoot>
                       <tr>
                           <td>Gender: {this.state.gender} </td>                         
                       </tr>
                   </tfoot>
               </table>
           );
      }
    });

var App = React.createClass({
  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
How to get a clicked HTML element in React? How to pass an Argument to a Method used inside JSX expression? Integrate Bootstrap with ReactJS Application Component displays Height and Width on window resize How to perform computation inside expression using ternary operator? React JS Count number of checkboxes are checked