antd table 点击行触发radio 或 checkbox
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的更多相关文章
- GridView点击行触发SelectedIndexChanged事件
1.在<% @Page ...... %>指令中添加 EnableEventValidation="false" 2.在RowDataBound事件中添加 protec ...
- JQuery触发radio或checkbox的change事件
在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了 ...
- element表格点击行即选中该行复选框
关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...
- 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐
一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
- 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- REACT 使用antd Table 中rowSelection遇到的问题
首先项目是尚硅谷的后台谷粒平台,在用到antd Table 中的 rowSelection时,出现了一个问题(P87时遇到的问题): 表格中的每一项前面有一个radio单选框可以选中,本来是想利用ro ...
- React使用antd Table生成层级多选组件
一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
- 使用飞冰组件关于点击行回填在input内(React)
import { Table,Grid } from "@icedesign/base"; import { FormBinderWrapper as IceFormBinderW ...
- easyui datagrid取消点击行的选中事件
http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...
随机推荐
- python学习笔记5_异常
python学习笔记5_异常 1.什么事异常 Python使用异常对象(exception object) 来表示异常情况.遇到错误会发生异常. 如果异常对象未被处理或被捕捉,程序就会用所谓的回溯(t ...
- JSBridge的实现
JSBridge是Native代码与JS代码的通信桥梁.目前的一种统一方案是:H5触发url scheme->Native捕获url scheme->原生分析,执行->原生调用h5. ...
- Linux新手随手笔记1.2
重定向 输入重定向:将命令输出结果写入一个文件或将一个文件内容导回到命令里面的这个过程叫做重定向 :标准(>) 输出重定向 :覆盖写入清空写入(>)/追加写入(>>) :错 ...
- springfox-swagger之swagger-bootstrap-ui
swagger-bootstrap-ui是国内的一个swagger开源项目,从发起到现在已经有三年了.初次体验了一下,觉得还是挺不错的,就如当初使用mybatis-plus那样,因为有了mybatis ...
- 企业推动移动化战略中为什么需要Moli?
随着科技的进步,计算能力程指数上升,引爆人工智能的大发展,人类社会开始步进入智能时代.与此同时,端能力将演进到第三代,全面参与智能边缘计算,从PC互联到移动互联到万物互联,历史在快速演进:主流技术向物 ...
- Hyperscan-5.1.0 安装
安装依赖ragel ragel源码下载地址 编译安装 $ tar -xvf ragel-6.10.tar.gz $ cd ragel-6.10 $ ./configure $ make $ sudo ...
- LVS结合keepalive
LVS可以实现负载均衡,但是不能够进行健康检查,比如一个rs出现故障,LVS 仍然会把请求转发给故障的rs服务器,这样就会导致请求的无效性.keepalive 软件可以进行健康检查,而且能同时实现 L ...
- zookeeper-3.5.4-beta安装
官网地址 https://zookeeper.apache.org/ 下载文件解压进入conf目录下将zoo_sample.cfg名称修改为zoo.cfg # The number of millis ...
- 使用cURL尝试ElasticSearch
测试环境:debian 9官网提供了 deb,rpm,源码下载 官方下载地址:https://www.elastic.co/downloads/elasticsearch 通过源码安装会遇到一些小问题 ...
- ORACLE数据闪回
ALTER TABLE SPM_CON_PAYMENT_RECEIPT ENABLE ROW MOVEMENT; -- 表名 FLASHBACK TABLE SPM_CON_PAYMENT_REC ...