How To Use Radio Buttons In ReactJS?

• 01 September 2022, 09:35

Any changes to the rendering should be change via the state or props (react doc).

 

So here I register the event of the input, and then change the state, which will then trigger the render to show on the footer.

 

 

---

var SearchResult = React.createClass({
  getInitialState: function () {
    return {
      site: '',
      address: '',
    };
  },
  onSiteChanged: function (e) {
    this.setState({
      site: e.currentTarget.value,
    });
  },

  onAddressChanged: function (e) {
    this.setState({
      address: e.currentTarget.value,
    });
  },

  render: function () {
    var resultRows = this.props.data.map(function (result) {
      return (
        <tbody>
          <tr>
            <td>
              <input
                type="radio"
                name="site_name"
                value={result.SITE_NAME}
                checked={this.state.site === result.SITE_NAME}
                onChange={this.onSiteChanged}
              />
              {result.SITE_NAME}
            td>
            <td>
              <input
                type="radio"
                name="address"
                value={result.ADDRESS}
                checked={this.state.address === result.ADDRESS}
                onChange={this.onAddressChanged}
              />
              {result.ADDRESS}
            td>
          tr>
        tbody>
      );
    }, this);
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Nameth>
            <th>Addressth>
          tr>
        thead>
        {resultRows}
        <tfoot>
          <tr>
            <td>chosen site name {this.state.site} td>
            <td>chosen address {this.state.address} td>
          tr>
        tfoot>
      table>
    );
  },
});

---

Tagged in :