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

IT技术 html reactjs antd
2021-05-05 01:02:08

我正在尝试使用 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>
2个回答

不幸的是，在 v3.3 中无法隐藏 Select in multiplemode的搜索输入。

我们可以将输入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")
)

您可以在此处查看工作演示。

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

蚂蚁版本：3.26.6

<Select className="my_select_component" />

.my_select_component {
  .ant-select-search__field {
   display: none;
}
其它你可能感兴趣的问题
上一篇用于在 Firefox 中调试 React 的 VS Code 调试器配置 下一篇如何使用 React Native 在 TabNavigation 下的页脚文本中设置图像