如何使用现有选择显示反应引导程序预输入菜单中的所有选项

Question

我希望整个菜单列表都显示 onFocus 而不是像下面给出的图片那样只显示所选元素。

<Typeahead
  labelKey="label"
  options={options}
  placeholder="Search.."
  onFocus={(e)=>this.onFocus(e)}
  onKeyDown={()=>this.onChange()}
  ref={(typeahead) => this.typeahead = typeahead}
  selected={this.props.single}
  renderMenuItemChildren={(option) => (
    <div onClick={(e)=>this.handleClick(e)} value={option.label}>
      {option.label}
    </div> 
  )}
/>

Answer 1

来自类似的问答：

该filterBy道具可以自定义功能，让您筛选结果不过你想要的。

例子：

<Typeahead
  filterBy={(option, props) => {
    if (props.selected.length) {
      // Display all the options if there's a selection.
      return true;
    }
    // Otherwise filter on some criteria.
    return option.label.toLowerCase().indexOf(props.text.toLowerCase()) !== -1;
  }}
  labelKey="label"
  options={options}
  placeholder="Search.."
  onFocus={(e)=>this.onFocus(e)}
  onKeyDown={()=>this.onChange()}
  ref={(typeahead) => this.typeahead = typeahead}
  selected={this.props.single}
  renderMenuItemChildren={(option) => (
    <div onClick={(e)=>this.handleClick(e)} value={option.label}>
      {option.label}
    </div> 
  )}
/>

编辑：上面的示例假设options传递给 typeahead的数组包含 type 的选项{ label: string }。对于不同labelKey的字符串或字符串数​​组，需要相应地更新过滤

// options: Array<{ name: string }>
return option.name.toLowerCase().indexOf(props.text.toLowerCase()) !== -1

// options: Array<string>
return option.toLowerCase().indexOf(props.text.toLowerCase()) !== -1