[英]Antd Multi-Select Options, but remove entries from search field
我正在使用 Ant Design 的 Select 功能。 尤其是多選。
我想保持我的選擇不變,但我想擺脫搜索字段中的條目。
在圖像中,我想突出顯示下拉列表中的選擇,但去掉以紅色突出顯示的條目。
這是我使用的代碼。
https://codesandbox.io/s/sad-glade-eunf6?file=/index.js
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select, Radio } from "antd";
const { Option } = Select;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log(`Selected: ${value}`);
}
class SelectSizesDemo extends React.Component {
state = {
size: "default"
};
handleSizeChange = e => {
this.setState({ size: e.target.value });
};
render() {
const { size } = this.state;
return (
<>
<Select
mode="multiple"
size={size}
placeholder="Please select"
onChange={handleChange}
style={{ width: "100%" }}
>
{children}
</Select>
</>
);
}
}
ReactDOM.render(<SelectSizesDemo />, document.getElementById("container"));
我嘗試在 Select 標記內設置 value={[ ]} ,但它也擦除了選擇。
我該怎么做呢?
您可以簡單地應用樣式:
<Select
mode="multiple"
size={size}
className="dont-show" // <--- apply class to provide style only specific to this select
placeholder="Please select"
onChange={handleChange}
style={{ width: "100%" }}
>
{children}
</Select>
.dont-show .ant-select-selection-item {
display: none !important;
}
工作演示:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.