[英]How to remove drop down menu in Transfer ant-design?
It looks like the only way is through css selection since the component API doesn't have any control over it via props.看起来唯一的方法是通过 css 选择,因为组件 API 无法通过道具对其进行任何控制。 Put below code in your css file:
将以下代码放入您的 css 文件中:
span.ant-transfer-list-header-dropdown {
display: none;
}
EDIT编辑
It's possible to "change" the menu options by setting the selectAllLabels
props of the component but you'd have to build the dropdown menu yourself.可以通过设置组件的
selectAllLabels
来“更改”菜单选项,但您必须自己构建下拉菜单。 You'll still have to hide their header dropdown in CSS since you're replacing their menu with your own menu.您仍然需要在 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"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.