Antd 选择元素：如何禁用打字？答案

【问题标题】：Antd select element: how can I disable typing?Antd 选择元素：如何禁用打字？
【发布时间】：2018-08-23 00:18:13
【问题描述】：

我正在尝试使用 mode="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>

【问题讨论】：

标签： html reactjs antd

【解决方案1】：

很遗憾，在 v3.3 中，multiple 模式下无法隐藏 Select 的搜索输入。

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

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

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的工作演示。

【讨论】：

【解决方案2】：

这是 ant selection 组件中的一种 hack。（使用 CSS）

蚂蚁版本：3.26.6

<Select className="my_select_component" />

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

【讨论】：