如何在 ReactJS 中使用单选按钮?

问题描述

我是 ReactJS 的新手，如果这听起来不对，抱歉.我有一个组件可以根据接收到的数据创建多个表行.

I am new to ReactJS, sorry if this sounds off. I have a component that creates several table rows according to the received data.

列中的每个单元格都有一个单选框.因此，用户可以从现有行中选择一个 site_name 和一个 address.选择应显示在页脚中.这就是我被卡住的地方.

Each cell within the column has a radio checkbox. Hence the user can select one site_name and one address from the existing rows. The selection shall be shown in the footer. And thats where I am stuck.

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() 之类的操作来选择一个单选复选框类型并将其插入到第一个页脚中细胞.

In jQuery I could do something like $("input[name=site_name]:checked").val() to get the selection of one radio checkbox type and insert it into the first footer cell.

但肯定有一种 Reactjs 方式，我完全想念它吗?非常感谢

But surely there must be a Reactjs way, which I am totally missing? Many Thanks

推荐答案

对渲染的任何更改都应该通过 state 或 props (反应文档).

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

所以这里我注册了输入的事件，然后改变了state，这将触发渲染显示在页脚上.

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>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

这篇关于如何在 ReactJS 中使用单选按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！