react穿梭框双击移动

解决思路：

1. 实现单击双击，且双击不触发单击事件（参考上一篇文章）

2. 双击后数据直接移动到另一边，不许手动触发，穿梭框的数据都是写在dataSource里面，默认显示在左边，，但是他会把targetKeys里面的除外，然后显示在右边，所以我们只需要双击的时候把那一条数据添加到targetKeys 里面就可以了

链接： 

在react中实现单击双击

1. 通过闭包实现单双击

function onDoubleClick() {
  let isClick = false;
  let clickNum = 0;
  return function ({ singleClick, doubleClick, params }) {
    // 如果没有绑定双击函数，直接执行单击程序
    if (!doubleClick) {
      return singleClick && singleClick(params);
    }

    clickNum++;
    // 毫秒内点击过后阻止执行定时器
    if (isClick) {
      return;
    }
    isClick = true;

    setTimeout(() => {
      // 超过1次都属于双击
      if (clickNum > 1) {
        doubleClick && doubleClick(params);
      } else {
        singleClick && singleClick(params);
      }
      clickNum = 0;
      isClick = false;
    }, 300);
  };
}
const onDoubleClickFn = onDoubleClick();

 2. 在穿梭框中使用

 <Transfer
      dataSource={mockData}
      titles={['Source', 'Target']}
      targetKeys={targetKeys}
      selectedKeys={selectedKeys}
      onChange={onChange}
      onSelectChange={(sourceSelectedKeys, targetSelectedKeys) =>
        onDoubleClickFn({
          singleClick: (e) => {
            const { sourceSelectedKeys, targetSelectedKeys } = e;
            onSelectChange(sourceSelectedKeys, targetSelectedKeys);
          },
          doubleClick: (e) => {
            const { sourceSelectedKeys, targetSelectedKeys } = e;
            onDoubleChange(sourceSelectedKeys, targetSelectedKeys);
          },
          params: { sourceSelectedKeys, targetSelectedKeys },
        })
      }
      onScroll={onScroll}
      render={(item) => item.title}
    />

// 双击穿梭成功后的函数,将结果抛出;
const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    console.log('sourceSelectedKeys:', sourceSelectedKeys);
    console.log('targetSelectedKeys:', targetSelectedKeys);
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  // 双击穿梭成功后的函数,将结果抛出;
  const onDoubleChange = (sourceSelectedKeys, targetSelectedKeys) => {
      let doubleList, // 右侧选择框数据
          direction, // 方向
          selectedKeys; // 选择的数据
      if (sourceSelectedKeys.length !== 0 && targetSelectedKeys.length == 0) {
        doubleList = targetKeys.concat([...sourceSelectedKeys]); 
        direction = "left";
        selectedKeys = sourceSelectedKeys;
      } else {
        doubleList = targetKeys.filter((item) => item != targetSelectedKeys);
        direction = "right";
        selectedKeys = targetSelectedKeys;
      }
      setTargetKeys(doubleList)
      setSelectedKeys([])
    };

3. 完整代码

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);

function onDoubleClick() {
  let isClick = false;
  let clickNum = 0;
  return function ({ singleClick, doubleClick, params }) {
    // 如果没有绑定双击函数，直接执行单击程序
    if (!doubleClick) {
      return singleClick && singleClick(params);
    }

    clickNum++;
    // 毫秒内点击过后阻止执行定时器
    if (isClick) {
      return;
    }
    isClick = true;

    setTimeout(() => {
      // 超过1次都属于双击
      if (clickNum > 1) {
        doubleClick && doubleClick(params);
      } else {
        singleClick && singleClick(params);
      }
      clickNum = 0;
      isClick = false;
    }, 300);
  };
}
const onDoubleClickFn = onDoubleClick();

const App = () => {
  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const onChange = (nextTargetKeys, direction, moveKeys) => {
    console.log('targetKeys:', nextTargetKeys);
    console.log('direction:', direction);
    console.log('moveKeys:', moveKeys);
    setTargetKeys(nextTargetKeys);
  };

  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    console.log('sourceSelectedKeys:', sourceSelectedKeys);
    console.log('targetSelectedKeys:', targetSelectedKeys);
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  // 双击穿梭成功后的函数,将结果抛出;
  const onDoubleChange = (sourceSelectedKeys, targetSelectedKeys) => {
      let doubleList, // 右侧选择框数据
          direction, // 方向
          selectedKeys; // 选择的数据
      if (sourceSelectedKeys.length !== 0 && targetSelectedKeys.length == 0) {
        doubleList = targetKeys.concat([...sourceSelectedKeys]); 
        direction = "left";
        selectedKeys = sourceSelectedKeys;
      } else {
        doubleList = targetKeys.filter((item) => item != targetSelectedKeys);
        direction = "right";
        selectedKeys = targetSelectedKeys;
      }
      setTargetKeys(doubleList)
      setSelectedKeys([])
    };

  const onScroll = (direction, e) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
  };

  return (
    <Transfer
      dataSource={mockData}
      titles={['Source', 'Target']}
      targetKeys={targetKeys}
      selectedKeys={selectedKeys}
      onChange={onChange}
      onSelectChange={(sourceSelectedKeys, targetSelectedKeys) =>
        onDoubleClickFn({
          singleClick: (e) => {
            const { sourceSelectedKeys, targetSelectedKeys } = e;
            onSelectChange(sourceSelectedKeys, targetSelectedKeys);
          },
          doubleClick: (e) => {
            const { sourceSelectedKeys, targetSelectedKeys } = e;
            onDoubleChange(sourceSelectedKeys, targetSelectedKeys);
          },
          params: { sourceSelectedKeys, targetSelectedKeys },
        })
      }
      onScroll={onScroll}
      render={(item) => item.title}
    />
  );
};
export default App;