Ant Design Transfer组件如何为左右穿梭按钮绑定独立触发函数

Transfer 组件的 onChange 回调默认携带方向参数，可直接通过该参数区分左右点击操作，无需额外重写组件逻辑。 #

方案一：基于原生 onChange 回调实现（推荐，改动最小） #

import { Transfer } from 'antd';
import { useState } from 'react';

const MyTransfer = () => {
  const [dataSource, setDataSource] = useState([
    { key: '1', title: '选项1' },
    { key: '2', title: '选项2' },
    { key: '3', title: '选项3' },
  ]);
  const [targetKeys, setTargetKeys] = useState([]);

  // 向右穿梭触发的自定义add函数
  const add = (movedItems) => {
    console.log('新增的条目：', movedItems);
    // 你的业务逻辑
  };

  // 向左穿梭触发的自定义remove函数
  const remove = (movedItems) => {
    console.log('移除的条目：', movedItems);
    // 你的业务逻辑
  };

  const handleChange = (newTargetKeys, direction, movedItems) => {
    setTargetKeys(newTargetKeys);
    // 方向参数right=从左到右穿梭，left=从右到左穿梭
    direction === 'right' ? add(movedItems) : remove(movedItems);
  };

  return (
    <Transfer
      dataSource={dataSource}
      targetKeys={targetKeys}
      onChange={handleChange}
      render={item => item.title}
    />
  );
};

export default MyTransfer;

方案二：自定义操作按钮实现（适合需定制按钮样式、交互逻辑的场景） #

如果需要完全自定义按钮的点击逻辑、样式，可通过 operations 属性自定义按钮，自行控制穿梭逻辑和触发对应函数：

import { Transfer, Button } from 'antd';
import { useState } from 'react';

const MyTransfer = () => {
  const [dataSource, setDataSource] = useState([
    { key: '1', title: '选项1' },
    { key: '2', title: '选项2' },
    { key: '3', title: '选项3' },
  ]);
  const [targetKeys, setTargetKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);

  const add = (selectedLeftKeys) => {
    const newTargetKeys = [...targetKeys, ...selectedLeftKeys];
    setTargetKeys(newTargetKeys);
    setSelectedKeys([]);
    // 你的业务逻辑
  };

  const remove = (selectedRightKeys) => {
    const newTargetKeys = targetKeys.filter(key => !selectedRightKeys.includes(key));
    setTargetKeys(newTargetKeys);
    setSelectedKeys([]);
    // 你的业务逻辑
  };

  return (
    <Transfer
      dataSource={dataSource}
      targetKeys={targetKeys}
      selectedKeys={selectedKeys}
      onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
      }}
      render={item => item.title}
      operations={[
        <Button 
          type="primary" 
          disabled={!selectedKeys.filter(key => !targetKeys.includes(key)).length}
          onClick={() => add(selectedKeys.filter(key => !targetKeys.includes(key)))}
        >
          新增
        </Button>,
        <Button 
          type="primary"
          disabled={!selectedKeys.filter(key => targetKeys.includes(key)).length}
          onClick={() => remove(selectedKeys.filter(key => targetKeys.includes(key)))}
        >
          移除
        </Button>
      ]}
    />
  );
};

export default MyTransfer;

内容的提问来源于stack exchange，提问作者WildThing