react 应用程序如何在 antd table 中设置单选按钮的状态？

Question

我试着去了解antd

我这里有文档 Table 示例 3。单击单选按钮时，将设置此状态并选择该行。如果我点击了一行中的一个单元格，该行也应该被选中并且单选按钮的 ckeck 状态应该被设置。

有人知道怎么做吗？

import React from 'react';
import { Table } from 'antd';
import 'antd/dist/antd.css';

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        render: (text: string) => <a>{text}</a>,
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}

const data: DataType[] = [
    {
        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',
    },
];

// rowSelection object indicates the need for row selection
const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
};


export default function TableDemo() {

    return (
        <React.Fragment>
            <Table
                rowSelection={{
                    type: 'radio',
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                
            />

        </React.Fragment>
    );
}

Answer 1

table 的当前 v4 文档非常广泛。埋在里面的就是这个

“可以通过将第一列设为选择table列来选择行table。您可以使用rowSelection.type设置选择类型。默认为复选框。

默认情况下，单击复选框时会发生选择。如果您需要行单击选择行为，您可以看到 https://codesandbox.io/s/000vqw38rl。"

似乎是您要查找的内容。不过很容易错过。

react 应用程序如何在 antd table 中设置单选按钮的状态？

react app how can I set the state of the radio button in an antd table?

typescript

reactjs

antd