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

Question

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

从文档中我只能看到这两个按钮只触发 onChange 函数，我不想那样。

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

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

Ant Design Transfer Component. Separate functions for the transfer buttons

antd

ant-design-pro