Antd Multi-Select 选项，但从搜索字段中删除条目

Question

我正在使用 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={[ ]}，但它也清除了选择。

我该怎么做？

Answer 1

您可以简单地应用样式:

<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;
}

工作演示：

Antd Multi-Select 选项，但从搜索字段中删除条目

Antd Multi-Select Options, but remove entries from search field

javascript

reactjs

antd

multi-select