实现antd的穿梭框
题目：实现antd穿梭框的基本功能
antd的穿梭框实现有以下几个要点：
- 数据分为两部分，source-左侧，target-右侧
- 选项在左右两个框中穿梭，实际上是对 source 和 target 这两个数组进行增删的数据维护
import React, { useState } from "react";
import "./styles.css";
export default function Transfer(props) {
const [source, setSource] = useState(props.dataSource);
const [target, setTarget] = useState([]);
const [sourceSelectedKeys, setSourceSelectedKeys] = useState([]);
const [targetSelectedKeys, setTargetSelectedKeys] = useState([]);
const onSelectChange = (key, type, e) => {
if (type === "source") {
setSourceSelectedKeys([...sourceSelectedKeys, key]);
} else {
setTargetSelectedKeys([...targetSelectedKeys, key]);
}
};
const moveToRight = () => {
const dataSourceCpy = [...source];
const moveItem = dataSourceCpy.filter((item) =>
sourceSelectedKeys.includes(item.key)
);
const newSource = dataSourceCpy.filter(
(item) => !sourceSelectedKeys.includes(item.key)
);
setTarget([...moveItem, ...target]);
setSource(newSource);
setSourceSelectedKeys([]);
};
const moveToLeft = () => {
const targetCpy = [...target];
const moveItem = targetCpy.filter((item) =>
targetSelectedKeys.includes(item.key)
);
const newTarget = targetCpy.filter(
(item) => !targetSelectedKeys.includes(item.key)
);
setTarget(newTarget);
setSource([...moveItem, ...source]);
setTargetSelectedKeys([]);
};
const handleTransfer = (type) => {
if (type === "right") {
moveToRight();
} else {
moveToLeft();
}
};
return ({source.map((item) => {
return ( {
onSelectChange(item.key, "source", e);
}}
/>
);
})}
{target.map((item) => {
return ( {
onSelectChange(item.key, "target", e);
}}
/>
);
})});
}.container {
display: flex;
}.dataSource {
border: 1px solid black;
width: 200px;
height: 300px;
}.operation {
display: flex;
flex-direction: column;
}.target {
border: 1px solid black;
width: 200px;
height: 300px;
}
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量