Antd select 元素：如何禁用输入？

Question

我正在尝试将 select 元素与模式 ="multiple" 一起使用。我希望禁用输入，这意味着用户只能在现有选项之间进行选择，而不能输入文本。我该怎么做？

我的元素：

import { Select } from 'antd';
import 'antd/dist/antd.css';
const { Option, OptGroup } = Select;

<Select
                        defaultValue={['current', 'grower', 'variety', 'varietyP90']}
                        size={'large'}
                        style={{ width: '13rem' }}
                        onChange={value => this.setState({ yield: value })}
                        mode="multiple"
                        maxTagCount={0}
                        maxTagPlaceholder="Yield metrics">
                        <Option value="current">Current Yield</Option>
                        <Option value="grower">Grower Average</Option>
                        <Option value="variety">Variety Potential</Option>
                        <Option value="varietyP90">All growers' average</Option>
                    </Select>

Answer 1

不幸的是，在 v3.3 中，无法在 multiple 模式下隐藏 Select 的搜索输入。

我们可以将输入 maxlength 设置为零并得到想要的结果。

提供的解决方案有点乱，我个人不喜欢它，但我找不到更好的解决方案。我尝试使用 css 隐藏输入，但这会阻止关闭 drop-list，因为输入被用作关闭焦点丢失事件列表的触发器。

class TagSelect extends Select {
  disableInput() {
    const selects = document.getElementsByClassName(`ant-select-search__field`)
    for (let el of selects) {
      el.setAttribute(`maxlength`, 0)
    }
  }
  componentDidMount() {
    this.disableInput()
  }
}

ReactDOM.render(
  <TagSelect
    defaultValue={['current']}
    size={'large'}
    style={{width: '100%'}}
    mode="multiple"
    placeholder="Yield metrics"
  >
    <Option value="current">Current Yield</Option>
    <Option value="grower">Grower Average</Option>
    <Option value="variety">Variety Potential</Option>
    <Option value="varietyP90">All growers' average</Option>
  </TagSelect>,
  document.getElementById("container")
)

您可以查看工作演示 here。

Answer 2

这是蚂蚁选择组件中的一种 hack。（使用 css）

蚂蚁版本：3.26.6

<Select className="my_select_component" />

.my_select_component {
  .ant-select-search__field {
   display: none;
}

Antd select 元素：如何禁用输入？

Antd select element: how can I disable typing?

html

reactjs

antd