antd中transfer穿梭框组件双击移动数据
需求:双击任意标题,实现穿梭功能,而不影响搜索功能
使用render可以自定义标题,
若在外层套了div,则需要重写filterOption方法,否则搜索会报错
此案例在div上添加了onDoubleClick双击事件,实现双击移动需求
完整代码:
import { Transfer } from 'antd';
import { useState } from 'react';
//数据
const mockData = Array.from({
length: 20,
}).map((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
}));
const initialTargetKeys = mockData
.filter((item) => Number(item.key) > 10)
.map((item) => item.key);
const MyTransfer = () => {
const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
const onChange = (targetKeys, direction, moveKeys) => {
//目标
setTargetKeys(targetKeys);
};
//双击移动用户
const doubleClick = (record) => {
console.log(record);
console.log(targetKeys);
//如果targetKeys不是空数组并且targetKeys不包含record的key 为绑定
if (targetKeys.length === 0 || !targetKeys.includes(record.key)) {
//绑定时
console.log('绑定');
setTargetKeys([...targetKeys, record.key]);
} else {
// 解绑时
console.log('解绑');
setTargetKeys(targetKeys.filter((item) => item !== record.key));
}
};
//绑定用户搜索过滤
const filterOption = (inputValue, option) =>
option.title.indexOf(inputValue) > -1;
return (
<div>
<Transfer
pagination
showSearch
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
onChange={onChange}
filterOption={filterOption}
render={(item) => (
<div onDoubleClick={() => doubleClick(item)}>{item.title}</div>
)}
/>
</div>
);
};
export default MyTransfer;
标签:const,record,transfer,item,key,targetKeys,antd,双击
From: https://www.cnblogs.com/sxliu414/p/17969055