react函数组件中从后台获取一组数据如何实现类似antd中tag标签的checkbox切换效果
时间: 2024-03-23 20:42:23 浏览: 24
从后台获取一组数据后,需要将数据渲染到页面上,可以使用map方法遍历数据,渲染多个标签。同时,需要在每个标签上绑定点击事件,通过修改选中状态来实现切换效果。
示例代码:
```jsx
import React, { useState, useEffect } from 'react';
import { Tag } from 'antd';
const TagCheckboxGroup = () => {
const [data, setData] = useState([]);
useEffect(() => {
// 模拟从后台获取数据
const fetchData = async () => {
const res = await fetch('/api/tags');
const json = await res.json();
setData(json);
};
fetchData();
}, []);
const handleTagClick = (id) => {
setData(data.map(tag => {
if (tag.id === id) {
return { ...tag, checked: !tag.checked };
}
return tag;
}));
}
return (
<div>
{data.map(tag => (
<Tag.CheckableTag key={tag.id} checked={tag.checked} onClick={() => handleTagClick(tag.id)}>
{tag.name}
</Tag.CheckableTag>
))}
</div>
);
};
export default TagCheckboxGroup;
```
在上面的代码中,首先通过useState钩子定义了一个data状态变量,用于保存从后台获取的数据。然后使用useEffect钩子,在组件渲染时从后台获取数据,并将数据保存到data状态变量中。接着使用map方法遍历data数组,渲染多个Tag.CheckableTag组件,并将每个标签的选中状态绑定到对应数据的checked属性上。最后,在每个标签上绑定onClick事件,并在事件处理函数中通过修改对应的数据的checked属性来切换选中状态。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)