如何在ReactJS中使用单选按钮？ [英] How to use radio buttons in ReactJS?

问题描述

我是ReactJS的新手，对不起，如果这听起来不对。我有一个根据收到的数据创建几个表行的组件。

列中的每个单元格都有一个无线电复选框。因此，用户可以从现有行中选择一个 site_name 和一个地址。选择应显示在页脚中。

  var SearchResult = React.createClass（{
 render：function（）{
 var resultRows = this.props.data.map（function（result）{
 return（
< tbody> 
< tr> 
< td><< ; input type =radioname =site_namevalue = {result.SITE_NAME}> {result.SITE_NAME}< / input>< / td> 
< td>< input type = radioname =addressvalue = {result.ADDRESS}> {result.ADDRESS}< / input>< / td> 
< / tr> 
< / tbody> 
）; 
}）; 
 return（
< table className =table> 
< thead> 
< tr> 
< th> Name< / th> 
< th>地址< / th> 
< / tr> 
< /广告> 
 {resultRows} 
< tfoot> 
< tr> 
< td>选择的网站名称???? < / TD> 
< td>选择的地址????? < / TD> 
< / tr> 
< / tfoot> 
< / table> 
）; 
} 
}）; 
  

在jQuery中，我可以像 $（input [name = site_name ]：checked。）.val（）来选择一个无线电复选框类型并将其插入到第一个页脚单元格中。

但是肯定会有Reactjs的方式，我完全错过了？许多感谢

解决方案

对渲染的任何更改都应通过状态或道具（反应doc ）。

因此，我在这里注册输入事件，然后更改状态，然后触发渲染器显示在页脚上。

$ b

  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.pro ps.data.map（function（result）{
 return（
< tbody> 
< tr> 
< td>< input type =radioname =site_name
 value = {result.SITE_NAME} 
 checked = {this.state.site === result.SITE_NAME } 
 onChange = {this.onSiteChanged} />{result.SITE_NAME}</td> 
< td>< input type =radioname =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>所选网站名称{this.state.site}< / td> 
< td>所选地址{this.state.address}< / td> 
< / tr> 
< / tfoot> 
< / table> 
）; 
} 
}）; 
  

jsbin

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

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>
       );
   }
});

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.

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

解决方案

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>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中使用单选按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！