Antd选择元素:如何禁用键入? [英] Antd select element: how can I disable typing?

问题描述

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

I'm trying to use a select element with mode="multiple". I'd like for input to be disabled, meaning that a user can only choose between existing options, not enter text. How do I do this?

我的元素:

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>

推荐答案

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

Unfortunately in v3.3 there is no way to hide the search input of Select in multiple mode.

我们可以将输入maxlength设置为零，并获得所需的结果.

We can set the input maxlength to zero and get the wanted result.

提供的解决方案有点骇人听闻，我个人不喜欢它，但找不到更好的解决方案.我试图使用css隐藏输入，但是由于输入被用作关闭焦点丢失事件列表的触发器，因此无法关闭下拉列表.

The offering solution is kind of a hack and I don't like it personally but I couldn't find any better solution. I tried to hide the input using css but that prevents to close the drop-list because the input is used as a trigger for closing the list on focus lost event.

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")
)

您可以在在此处查看正在运行的演示.

The working demo you can check here.

这篇关于Antd选择元素:如何禁用键入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！