实现 react-bootstrap-typeahead 的组合框行为

Question

我正在尝试使用react-bootstrap-typeahead 控件，但我很惊讶试图让它做我想做的事。我的页面上实际上有 2 个，其中一个正在执行真正的异步查找，另一个我几乎想要表现得像一个组合框。

我想做的是选择一个项目，然后单击下拉菜单改变主意并选择另一个项目。但是，如果您尝试这样做，当您再次展开列表时，它会自动过滤到您选择的项目。

例如，如果我使用demo page 上的基本示例并选择Alabama，现在单击输入只会显示Alabama，而不会显示其他选项。理想情况下，我希望这能将我返回到完整列表（这可能吗？）。

Answer 1

是的，这是可能的。 filterBy 属性可以采用自定义函数，允许您根据需要过滤结果。因此，在您链接到的示例的基础上，您需要按照以下方式做一些事情：

<Typeahead
  filterBy={(option, text) => {
    if (this.state.selected.length) {
      // Display all the options if there's a selection.
      return true;
    }
    // Otherwise filter on some criteria.
    return option.name.toLowerCase().indexOf(text.toLowerCase()) !== -1;
  }}
  labelKey="name"
  onChange={(selected) => this.setState({selected})}
  options={options}
  placeholder="Choose a state..."
  selected={this.state.selected}
/>

更新 从 v3.0.0 开始，filterBy 回调传递 props 而不是 text：

(option, props) => {
  if (props.selected.length) {
    // Display all the options if there's a selection.
    return true;
  }
  // Otherwise filter on some criteria.
  return option.name.toLowerCase().indexOf(props.text.toLowerCase()) !== -1;
}