如何刪除 Transfer ant-design 中的下拉菜單？

Question

我想使用antd的Transfer Component 但我不需要drop down menu ，如下圖所示。 我怎樣才能刪除它？

Answer 1

看起來唯一的方法是通過 css 選擇，因為組件 API 無法通過道具對其進行任何控制。 將以下代碼放入您的 css 文件中：

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

演示

編輯

可以通過設置組件的selectAllLabels來“更改”菜單選項，但您必須自己構建下拉菜單。 您仍然需要在 CSS 中隱藏他們的 header 下拉菜單，因為您要用自己的菜單替換他們的菜單。

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

演示