UIStore.ts (使用mobx) 1 import { observable, action, computed } from 'mobx'

  export class UIStore {
@observable public selectedRowKeys: string[] = [] // 单选 选中的key
@action
public onSelectedRowKeysChange = (selectedRowKeys: string[]) => {
this.selectedRowKeys = selectedRowKeys
    // do something 这里可以触发点击单选按钮选择数据
}

    // 保证单选,即数组里只有一个key
@action
public rowRadioSelected = (record: IOptions) => {
if (!this.selectedRowKeys.length) {
this.selectedRowKeys.push(record['key'])
} else {
if (this.selectedRowKeys.indexOf(record['key']) === -1) {
this.selectedRowKeys.splice(0, 1, record['key'])
}
}
 }
}
 export default new UIStore()
test.tsx
 import * as React from 'react'
import { observer } from 'mobx-react'
import UIStore from './UIStore' @observer
export default class Test extends React.Component {
const columns = [{
  title: 'Name',
  dataIndex: 'name',
  render: text => <a href="#">{text}</a>,
  }, {
  title: 'Age',
  dataIndex: 'age',
  }, {
  title: 'Address',
  dataIndex: 'address',
  }] const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
  }, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
  }, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
  }, {
  key: '4',
  name: 'Disabled User',
  age: 99,
  address: 'Sidney No. 1 Lake Park',  
 }] render () {
  
  const rowRadioSelection: TableRowSelection<IOptions> = { // IOptions 是每行数据的类型
     type: 'radio',
     selectedRowKeys: toJS(UIStore.selectedRowKeys),
     onChange: UIStore.onSelectedRowKeysChange,
   }
  return (
<Table
  rowKey={(_, i) => `${i}`}
  columns={columns}
  dataSource={data}
  rowSelection={rowRadioSelection}
onRow={record => {
return {
onClick: () => {
       UIStore.rowRadioSelected(record)
      },
     }
}
}
/>
)}
}

 

参考: https://codesandbox.io/s/000vqw38rl

antd table 点击行触发radio 或 checkbox的更多相关文章

  1. GridView点击行触发SelectedIndexChanged事件

    1.在<% @Page ...... %>指令中添加 EnableEventValidation="false" 2.在RowDataBound事件中添加 protec ...

  2. JQuery触发radio或checkbox的change事件

    在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了 ...

  3. element表格点击行即选中该行复选框

    关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...

  4. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  5. 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  6. REACT 使用antd Table 中rowSelection遇到的问题

    首先项目是尚硅谷的后台谷粒平台,在用到antd Table 中的 rowSelection时,出现了一个问题(P87时遇到的问题): 表格中的每一项前面有一个radio单选框可以选中,本来是想利用ro ...

  7. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  8. 使用飞冰组件关于点击行回填在input内(React)

    import { Table,Grid } from "@icedesign/base"; import { FormBinderWrapper as IceFormBinderW ...

  9. easyui datagrid取消点击行的选中事件

    http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...

随机推荐

  1. 牛津初阶字典单词F-联想故事

    从前有一个fable寓言,讲的是奥巴马穿着棉fabrics织物,走在去往学校的路上,他的心情fabulous极好的,绝妙的.因为他学校的facilities 设施fabulous非常棒,但有些人不喜欢 ...

  2. 数据结构学习之字符串匹配算法(BF||KMP)

    数据结构学习之字符串匹配算法(BF||KMP) 0x1 实验目的 ​ 通过实验深入了解字符串常用的匹配算法(BF暴力匹配.KMP.优化KMP算法)思想. 0x2 实验要求 ​ 编写出BF暴力匹配.KM ...

  3. 【原创】互联网项目中mysql应该选什么事务隔离级别

    摘要 企业千万家,靠谱没几家. 社招选错家,亲人两行泪. 祝大家金三银四跳槽顺利! 引言 开始我们的内容,相信大家一定遇到过下面的一个面试场景 面试官:"讲讲mysql有几个事务隔离级别?& ...

  4. echarts 配置

    堆叠柱状图, 只要保证 stack 属性相同,就强制画成一列 这就是切割线

  5. BSScrollViewEdgePop

    https://blog.csdn.net/qq_17190231/article/details/84201956 2018年11月18日 16:52:39 FreeBaiShun 阅读数:66 标 ...

  6. nginx基础之【study one】

    Nginx是种代理服务器,即可以作为反向代理服务器.邮件服务器等HTTP服务器,支持很多第三方模块扩展,如GZip.SSL.FastCGI. 最常用的功能有Http反向代理.负载均衡和Web缓存: 1 ...

  7. cat

    cat命令能够显示或拼接文件内容,它本身表示conCATenate(拼接) 一般语法 打印单个文件的内容 [root@VM_0_15_centos ~]# cat output.session 打印多 ...

  8. 排序—时间复杂度为O(n2)的三种排序算法

    1 如何评价.分析一个排序算法? 很多语言.数据库都已经封装了关于排序算法的实现代码.所以我们学习排序算法目的更多的不是为了去实现这些代码,而是灵活的应用这些算法和解决更为复杂的问题,所以更重要的是学 ...

  9. LeetCode_p150_逆波兰表达式计算/后缀表达式计算

    有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分. 给定逆波兰表达式总是有效的.换句话说,表达式总会得出有效数值且不存在除 ...

  10. 自动化测试(web测试selenium框架)

    什么是selenium? 一个用于Web应用程序测试的工具直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firefox,Safa ...