ReactJS UI Ant Design Transfer 组件

Ant Design Transfer 是一款 ReactJS UI 组件，用于在两个列表之间进行数据的移动。这个组件在用户需要从一个列表中选择一些项目，并把这些项目移动到另一个列表时非常有用。

特性

• 支持拖拽操作和键盘操作。
• 支持搜索过滤列表。
• 支持通过自定义渲染项和标题进行高级自定义。
• 支持动态加载数据和移动。

安装

通过 npm 安装

npm install antd-transfer

通过 yarn 安装

yarn add antd-transfer

使用

Ant Design Transfer 组件需要传递两个参数：数据源（source）和目标数据源（target）。

以下是一个简单示例：

import { Transfer } from 'antd';

const dataSource = [
  {
    key: '1',
    title: '项目 1',
  },
  {
    key: '2',
    title: '项目 2',
  },
  {
    key: '3',
    title: '项目 3',
  },
  {
    key: '4',
    title: '项目 4',
  },
];

class App extends React.Component {
  state = {
    targetKeys: [],
  };

  handleChange = (targetKeys) => {
    this.setState({ targetKeys });
  };

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

在这个示例代码中，我们导入 Transfer 组件，并且定义了两个 Data Source：一个是源数据源，一个是目标数据源。然后，我们定义了一个 handleChange 函数，在这个函数中，我们更新了目标数据源的值。最后，在 render 方法中，我们渲染了选择框中每一项的标题。

参数

dataSource

数据源，可以是数组或者是一个函数，返回一个 Promise。

dataSource?: TransferDataSource[] | ((props: TransferProps) => Promise<TransferDataSource[]>);

targetKeys

目标数据源的 key 数组。

targetKeys?: string[];

selectedKeys

已选择项目 key 数组。

selectedKeys?: string[];

onChange

选项在两个列表间转移时的回调函数。

onChange?: (targetKeys: string[], direction: 'left' | 'right', moveKeys: string[]) => void;

render

自定义渲染函数。

render?: (item: TransferItem) => React.ReactNode;

总结

Ant Design Transfer 是一个很实用的组件，它能够方便地在两个列表之间移动数据，并且具有很高的自定义性。在使用时，我们只需要传递列表数据源、目标数据源和一些回调函数，就可以轻松地实现一个数据选择框。