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屋！