您现在的位置是:首页 > 综合文章 > reactreact

antd表格如何使用单选框设置selectedRowKeys

譬如朝露2019-10-13react3084人已围观

简介antd table 点击行触发radio 或 checkboxantd中的table点击触发radio选中,需要设置rowSelection中的selectedRowKeysimport React, { C...

antd table 点击行触发radio 或 checkbox

antd中的table点击触发radio选中,需要设置rowSelection中的selectedRowKeys

import React, { Component } from 'react';
import { Card, Button, Table, Form, Select, Modal, message } from 'antd';
const dataSource = [
    {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
    },
    {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
    },
];

const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    },
];
class Order extends Component {
    constructor(props) {
        super(props);
        this.state = {

            selectedRowKeys: []

        }
    }

    onRowClick = (record, index) => {
        let selectedRowKeys = [`${index + 1}`];
        this.setState({
            selectedRowKeys
        })
    }


    render() {
        const selectedRowKeys = this.state.selectedRowKeys;
        const rowSelection = {
            type: 'radio',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys
                })
            }
        }
        return (
            <div>
                <Card >
                    <Button>订单详情</Button>
                    <Button >结束订单</Button>
                </Card>
                <Table dataSource={dataSource} columns={columns} rowSelection={rowSelection} onRow={(record, index) => {
                    return {
                        onClick: () => {
                            this.onRowClick(record, index);
                        }

                    };
                }} />;
            </div>
        );
    }
}

export default Order;


譬如朝露

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏