[英]react app how can I set the state of the radio button in an antd table?
我試着理解 antd。
我有來自文檔表示例 3 的此處。單擊單選按鈕時,將設置此 state 並選擇行。 如果我單擊一行的單元格,則還應選擇該行,並應設置單選按鈕的 ckeck state。
有誰知道該怎么做?
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>
);
}
當前用於表格的 v4 文檔非常廣泛。 埋在那里的是這個。
“可以通過將第一列設為可選列來選擇行。您可以使用 rowSelection.type 設置選擇類型。默認為復選框。
默認情況下單擊復選框時會發生選擇。 如果需要行單擊選擇行為,可以查看https://codesandbox.io/s/000vqw38rl 。”
好像你在找什么。 不過很容易錯過。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.