时间戳

首页 > 解决方案 > 有没有办法强制选择，即不允许在 TypeAHead 组件中输入自由文本？

typeahead - 有没有办法强制选择，即不允许在 TypeAHead 组件中输入自由文本？

问题描述

对于 react-bootstrap-typeahead，有没有办法强制从下拉列表中进行选择，即不允许在 TypeAHead 组件中输入自由文本？

标签： typeaheadreact-bootstrap-typeahead

解决方案

听起来您正在尝试使预先输入的工作更像是一个select字段。如果是这样，则有几部分。您可以将输入设置为只读以禁用输入。您还需要更改过滤，以便所有选项都显示在菜单中，即使有选择：

<Typeahead
  ...
  filterBy={(option, state) => {
    if (state.selected.length) {
      return true;
    }
    return option.label.toLowerCase().indexOf(state.text.toLowerCase()) > -1;
  }}
  inputProps={{
    readOnly: true,
  }}
/>

尽管您可能希望添加一些额外的样式以使只读输入看起来更具交互性，但这应该可以让您大部分时间到达那里。

这是一个工作示例：https ://codesandbox.io/s/rbt-select-example-nfc5q?file=/src/index.js

推荐阅读