react实现穿梭框组件
时间: 2023-07-12 14:49:58 浏览: 64
React 实现穿梭框组件可以使用 antd 的 Transfer 组件,也可以自己手写组件。以下是一个简单的手写穿梭框组件的示例代码:
```jsx
import React, { useState } from "react";
const Transfer = ({ data }) => {
const [sourceData, setSourceData] = useState(data);
const [targetData, setTargetData] = useState([]);
const handleSelect = (item) => {
const index = sourceData.findIndex((i) => i.id === item.id);
setSourceData([...sourceData.slice(0, index), ...sourceData.slice(index + 1)]);
setTargetData([...targetData, item]);
};
const handleDeselect = (item) => {
const index = targetData.findIndex((i) => i.id === item.id);
setTargetData([...targetData.slice(0, index), ...targetData.slice(index + 1)]);
setSourceData([...sourceData, item]);
};
return (
<div className="transfer">
<div className="transfer-panel">
<h4>Source</h4>
<ul>
{sourceData.map((item) => (
<li key={item.id} onClick={() => handleSelect(item)}>
{item.name}
</li>
))}
</ul>
</div>
<div className="transfer-panel">
<h4>Target</h4>
<ul>
{targetData.map((item) => (
<li key={item.id} onClick={() => handleDeselect(item)}>
{item.name}
</li>
))}
</ul>
</div>
</div>
);
};
export default Transfer;
```
需要注意的是,这个示例代码仅实现了最基本的功能,如需使用更多高级功能,建议使用 antd 的 Transfer 组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)