Ant Design 列表加选中效果
时间: 2024-01-22 16:03:42 浏览: 26
Ant Design 的列表组件提供了一个 `List` 组件和一个 `ListItem` 组件,可以通过设置 `selected` 属性来实现选中效果。
具体实现可以参考以下代码示例:
```jsx
import { List } from 'antd';
import { useState } from 'react';
function MyList({ data }) {
const [selectedItem, setSelectedItem] = useState(null);
const handleItemClick = (item) => {
setSelectedItem(item);
};
return (
<List
dataSource={data}
renderItem={(item) => (
<List.Item
onClick={() => handleItemClick(item)}
className={selectedItem === item ? 'selected-item' : ''}
>
{item.name}
</List.Item>
)}
/>
);
}
```
在上面的代码中,我们通过 `useState` 钩子来管理当前选中的项。当用户点击某一项时,我们将其设置为选中项。然后,我们可以根据选中项来给对应的 `ListItem` 添加 `selected-item` 类名,从而实现选中效果。
当然,你也可以根据自己的需求来自定义选中效果,例如改变背景色、文本颜色等。