如何删除 Transfer ant-design 中的下拉菜单？

Question

我想使用来自antd 的Transfer 组件，但我不需要drop down menu，如下图所示。如何删除它？

Answer 1

看起来唯一的方法是通过 CSS 选择，因为组件 API 无法通过 props 对其进行任何控制。将以下代码放入您的 css 文件中：

span.ant-transfer-list-header-dropdown {
  display: none;
}

DEMO

编辑

可以通过设置组件的selectAllLabels 属性来“更改”菜单选项，但您必须自己构建下拉菜单。您仍然需要在 CSS 中隐藏他们的标题下拉菜单，因为您要用自己的菜单替换他们的菜单。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Transfer, Dropdown, Menu, Space, Button } from "antd";
import { DownOutlined } from "@ant-design/icons";

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 onChange = (nextTargetKeys, direction, moveKeys) => {
    console.log("targetKeys:", nextTargetKeys);
    console.log("direction:", direction);
    console.log("moveKeys:", moveKeys);
    setTargetKeys(nextTargetKeys);
  };

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

  const onScroll = (direction, e) => {
    console.log("direction:", direction);
    console.log("target:", e.target);
  };

  const leftLabel = ({ selectedCount, totalCount }) => (
    <Space size={5}>
      <Dropdown
        placement="bottomLeft"
        overlay={
          <Menu>
            <Menu.Item>
              <a>Option 1</a>
            </Menu.Item>
            <Menu.Item>
              <a>Option 2</a>
            </Menu.Item>
            <Menu.Item>
              <a>Option 3</a>
            </Menu.Item>
          </Menu>
        }
      >
        <DownOutlined style={{ fontSize: 11 }} />
      </Dropdown>
      {selectedCount > 0 ? `${selectedCount}/${totalCount}` : totalCount} items
    </Space>
  );

  const rightLabel = ({ selectedCount, totalCount }) => (
    <Space size={5}>
      <Dropdown
        placement="bottomLeft"
        overlay={
          <Menu>
            <Menu.Item>
              <a>Option A</a>
            </Menu.Item>
            <Menu.Item>
              <a>Option B</a>
            </Menu.Item>
            <Menu.Item>
              <a>Option C</a>
            </Menu.Item>
          </Menu>
        }
      >
        <DownOutlined style={{ fontSize: 11 }} />
      </Dropdown>
      {selectedCount > 0 ? `${selectedCount}/${totalCount}` : totalCount} items
    </Space>
  );

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

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

DEMO