Ant Design 传输组件。传输按钮的独立功能答案

【问题标题】：Ant Design Transfer Component. Separate functions for the transfer buttonsAnt Design 传输组件。传输按钮的独立功能
【发布时间】：2021-12-17 07:13:58
【问题描述】：

https://ant.design/components/transfer/

大家好！我只是想知道是否可以在传输按钮上实现两个单独的功能。例如，我想在用户点击右转时运行添加功能，我想在用户点击左转按钮时添加删除功能。

从文档中我只能看到两个按钮都只是触发 onChange 功能，我不希望那样。

【问题讨论】：

标签： antd ant-design-pro

【解决方案1】：

Transfer组件的API只使用一个函数来改变数据，但是你可以根据方向调用onChange内部的不同函数：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Transfer } from "antd";

const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`
  });
}

const initialTargetKeys = mockData
  .filter((item) => +item.key > 10)
  .map((item) => item.key);

const App = () => {
  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
  const [selectedKeys, setSelectedKeys] = useState([]);

  const handleAdd = (nextTargetKeys, moveKeys) => {
    console.log("add");
    setTargetKeys(nextTargetKeys);
  };
  const handleDelete = (nextTargetKeys, moveKeys) => {
    console.log("delete");
    setTargetKeys(nextTargetKeys);
  };

  const onChange = (nextTargetKeys, direction, moveKeys) => {
    if (direction === "left") {
      handleDelete(nextTargetKeys, moveKeys);
    } else {
      handleAdd(nextTargetKeys, moveKeys);
    }
  };

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

  return (
    <Transfer
      dataSource={mockData}
      titles={["Source", "Target"]}
      targetKeys={targetKeys}
      selectedKeys={selectedKeys}
      onChange={onChange}
      onSelectChange={onSelectChange}
      render={(item) => item.title}
    />
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

【讨论】：