返回

Ant Design Transfer 双树穿梭框的“造轮子”之旅：从零打造独一无二的城市选择组件

前端

在前端开发中，构建一个能够满足特定需求的组件是一项既富有挑战性又充满乐趣的任务。当您发现现有组件无法完全满足您的要求时，亲自“造轮子”便成了唯一的选择。在本文中，我们将详细阐述如何从零开始打造一个 Ant Design Transfer 双树穿梭框，并重点介绍如何创建父子节点联动关系，从而使这款组件完美适用于城市选择场景。

一、何为 Ant Design Transfer 双树穿梭框

Ant Design Transfer 双树穿梭框是 Ant Design UI 组件库中的一款强大组件，它允许用户在两个列表之间轻松地传输数据。双树穿梭框通常由两个树形结构组成，左侧树形结构用于显示待选择的数据，右侧树形结构用于显示已选择的数据。用户可以通过点击按钮或拖拽的方式在两个树形结构之间移动数据。

二、为什么需要“造轮子”

现有的 Ant Design Transfer 双树穿梭框虽然功能强大，但它并不完全适用于我们的城市选择场景。具体来说，我们需要解决以下问题：

  • 父子节点联动关系 ：在城市选择场景中，父子节点之间存在着天然的联动关系。例如，当用户选择了一个省份，那么该省份下的所有城市都应该自动被选中。反之，当用户取消选择了一个省份，那么该省份下的所有城市也应该自动被取消选择。
  • 自定义样式 ：我们需要对 Ant Design Transfer 双树穿梭框的样式进行定制，以使其更好地融入我们的项目设计风格。

三、如何“造轮子”

为了解决上述问题，我们需要对 Ant Design Transfer 双树穿梭框进行定制开发。具体步骤如下：

  1. 安装必要的依赖项
npm install antd@4.x
  1. 创建组件骨架
import React, { useState } from 'react';
import { Tree, Transfer } from 'antd';

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

  const treeData = [
    {
      title: '中国',
      key: '0',
      children: [
        {
          title: '北京',
          key: '1',
        },
        {
          title: '上海',
          key: '2',
        },
      ],
    },
  ];

  const onSelect = (selectedKeys, info) => {
    setSelectedKeys(selectedKeys);
  };

  const onTargetKeysChange = (targetKeys) => {
    setTargetKeys(targetKeys);
  };

  return (
    <Transfer
      dataSource={treeData}
      titles={['待选择城市', '已选择城市']}
      selectedKeys={selectedKeys}
      onSelect={onSelect}
      targetKeys={targetKeys}
      onTargetKeysChange={onTargetKeysChange}
    />
  );
};

export default CitySelector;
  1. 添加父子节点联动关系
import React, { useState } from 'react';
import { Tree, Transfer } from 'antd';

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

  const treeData = [
    {
      title: '中国',
      key: '0',
      children: [
        {
          title: '北京',
          key: '1',
        },
        {
          title: '上海',
          key: '2',
        },
      ],
    },
  ];

  const onSelect = (selectedKeys, info) => {
    const { selected, halfSelected } = info.node.props;

    if (selected) {
      const targetKeys = [...targetKeys, ...selectedKeys, ...halfSelected];
      setTargetKeys(Array.from(new Set(targetKeys)));
    } else {
      const targetKeys = targetKeys.filter(key => !selectedKeys.includes(key));
      setTargetKeys(targetKeys);
    }

    setSelectedKeys(selectedKeys);
  };

  const onTargetKeysChange = (targetKeys) => {
    setTargetKeys(targetKeys);
  };

  return (
    <Transfer
      dataSource={treeData}
      titles={['待选择城市', '已选择城市']}
      selectedKeys={selectedKeys}
      onSelect={onSelect}
      targetKeys={targetKeys}
      onTargetKeysChange={onTargetKeysChange}
    />
  );
};

export default CitySelector;
  1. 自定义样式

您可以根据自己的喜好对 Ant Design Transfer 双树穿梭框的样式进行定制。例如，您可以通过以下代码修改组件的背景颜色：

.ant-transfer {
  background-color: #f5f5f5;
}

四、总结

通过本文，我们详细阐述了如何从零开始打造一个 Ant Design Transfer 双树穿梭框，并重点介绍了如何创建父子节点联动关系，从而使这款组件完美适用于城市选择场景。希望本文能够帮助您在项目中构建出更加灵活、强大的组件。