reacthooks里antd表格怎么默认选择第一条数据
时间: 2023-11-27 18:52:48 浏览: 139
您可以使用`useEffect`钩子和`setSelectedRowKeys`方法来实现默认选择第一条数据。首先,在组件中定义一个`selectedRowKeys`状态:
```
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
```
然后,在`useEffect`钩子中设置`selectedRowKeys`的初始值:
```
useEffect(() => {
if (data.length > 0) {
setSelectedRowKeys([data[0].id]);
}
}, [data]);
```
这里假设您的数据源是`data`,并且它是一个包含对象的数组,每个对象都有一个`id`属性。在上述代码中,我们检查数据是否存在,如果存在,将第一条数据的`id`设置为`selectedRowKeys`的初始值。请注意,我们将`data`作为`useEffect`的依赖项,以便在数据更改时重新计算初始值。
最后,将`selectedRowKeys`作为`rowSelection`的属性传递给`Table`组件:
```
<Table
dataSource={data}
rowKey="id"
rowSelection={{
type: "radio",
selectedRowKeys,
onChange: (keys) => setSelectedRowKeys(keys),
}}
columns={columns}
/>
```
这里我们使用了`type: "radio"`来指定单选模式,然后将`selectedRowKeys`和`onChange`回调传递给`rowSelection`属性。现在,第一条数据将被默认选择。
阅读全文