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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (211)

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

该列中的每个单元格都有一个无线电复选框。因此,用户可以从现有行中选择一个site_name和一个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()来获得一个无线电复选框类型的选择并将其插入到第一个页脚单元格中。

提问于
用户回答回答于

这是在react js中实现单选按钮的最简单方法。

class App extends React.Component {
  
  setGender(event) {
    console.log(event.target.value);
  }
  
  render() {
    return ( 
      <div onChange={this.setGender.bind(this)}>
        <input type="radio" value="MALE" name="gender"/> Male
        <input type="radio" value="FEMALE" name="gender"/> Female
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

可以使用箭头功能而不是绑定。将上面的代码替换为

<div onChange={event => this.setGender(event)}>

对于默认值使用defaultChecked,像这样

<input type="radio" value="MALE" defaultChecked name="gender"/> Male

热门问答

边缘计算机器 ECM 是裸金属还是虚拟机?

你好,ECM目前以提供虚拟机为主,后续可以同时提供容器。

对象存储通过直传首次上传成功后怎么使直传链接失效,防止重新上传?

可酷可乐

腾讯云 · 售后工程师 (已认证)

热爱云计算的小锅一枚。
推荐
从当前的签名机制上看,并不能做到使用后即失效。有两种方式可以降低风险。 1.在web直传模式中,需要向STS申请临时账号,临时账号生效的时间是由durationInSeconds参数控制,可以尽量缩短时间配置。 2.在申请STS时,需要设置policy,确保当前客户端只能上传到C...... 展开详请

API网关使用计划里的配额期限多久?

推荐已采纳

没有期限,比如绑定api维度,则说明这个api可以访问多少次,用完了会提醒

localhost可以访问9200端口,外网无法访问9200端口,安全组是启用的?

推荐
localhost指向的是服务器的IPv6地址哦。 如果你需要能直接通过服务区公网IP访问常用两种方法 1. 可以将本地服务地址设置为0.0.0.0:端口号; 2.通过nginx代理本地IP地址和端口,并将其指向localhost:你的端口号,具体配置详见:https://www...... 展开详请

通过自行开发web前端从物联网平台获取数据?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐
你们可以自行开发小程序或者服务端接受数据,物联网平台了相关的API接口: 1.服务端API接口:https://cloud.tencent.com/document/product/1081/34957 2.应用端API接口:https://cloud.tencent.com/d...... 展开详请

移动直播iOS端SDK使用动效触发filepath must not be nil相关crash?

腾讯视频云-ZacharyTXLiteAVSDK技术支持
推荐
移动直播TXLiteAVSDK_Enterprise_iOS在6.8及之后的版本,动效资源有改动,如果新版本还是用之前老的版本的动效资源就会导致该crash问题。参考集成文档重新导入一下动效资源即可:https://cloud.tencent.com/document/produ...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动