[解決済み】ReactJSでラジオボタンを使用するには？

質問

私はReactJSの初心者です、これがオフに聞こえる場合は申し訳ありません。 私は、受信したデータに従って複数のテーブル行を作成するコンポーネントを持っています。

列内の各セルには、ラジオチェックボックスがあります。したがって、ユーザーは1つを選択することができます site_name と1つの address を既存の行から選択する。選択したものをフッターに表示すること。と、いうところで行き詰っています。

var SearchResult = React.createClass({
  render: function () {
    var resultRows = this.props.data.map(function (result) {
      return (
        <tbody>
          <tr>
            <td>
              <input type="radio" name="site_name" value={result.SITE_NAME}>
                {result.SITE_NAME}
              </input>
            </td>
            <td>
              <input type="radio" name="address" value={result.ADDRESS}>
                {result.ADDRESS}
              </input>
            </td>
          </tr>
        </tbody>
      );
    });
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Address</th>
          </tr>
        </thead>
        {resultRows}
        <tfoot>
          <tr>
            <td>chosen site name ???? </td>
            <td>chosen address ????? </td>
          </tr>
        </tfoot>
      </table>
    );
  },
});

jQueryでは、次のようなことができます。 $("input[name=site_name]:checked").val() を使用して、1つのラジオチェックボックスタイプの選択を取得し、それを最初のフッターセルに挿入します。

しかし、きっとReactjsの方法があるはずで、それは私が完全に見逃しているのでしょうか？ありがとうございます。

解決方法は？

レンダリングの変更は state または props ( リアクト・ドック ).

そこで、ここでは入力のイベントを登録し、その後に state フッターに表示するためのレンダーをトリガーします。

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>Name</th>
            <th>Address</th>
          </tr>
        </thead>
        {resultRows}
        <tfoot>
          <tr>
            <td>chosen site name {this.state.site} </td>
            <td>chosen address {this.state.address} </td>
          </tr>
        </tfoot>
      </table>
    );
  },
});

jsbin