如何使用现有选择显示react bootstrap typeahead菜单中的所有选项

Question

我希望整个menulist显示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

来自similar question and answer：

  

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.name.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> 
  )}
/>

Answer 2

@ericgio的答案对我不起作用，因为react-bootstrap-typeahead不再使用名称字段。我用它来制作下面带有许多自定义选项的Typeahead类，包括单击时显示的所有选项。当倍数设置为true时，它也会恢复到原始行为。

import { Typeahead as ReactBootstrapTypeahead } from "react-bootstrap-typeahead";
import defaultFilterBy from "react-bootstrap-typeahead/lib/utils/defaultFilterBy";
import React from "react";

/**
 * This class is responsible for setting a few sensible defaults on the typeahead object.
 */
export default class Typeahead extends React.Component {
  constructor(props) {
    super(props);
  }

  /**
   * This shows all of the values when you click into the typeahead, even if something is selected.  See more
   * here: https://stackoverflow.com/a/50376581/491553
   */
  static showAllOnClick(option, props) {
    if (props.multiple) {
      const newProps = {...props, filterBy: ["label"]};
      return defaultFilterBy(option, newProps);
    } else {

      if (props.selected && props.selected.length) {
        // Display all the options if there's a selection.
        return true;
      }

      // Otherwise filter on some criteria.
      return option.label && option.label.toLowerCase().indexOf(props.text.toLowerCase()) !== -1;
    }
  }

  render() {
    return <ReactBootstrapTypeahead {...this.props} />;
  }
}

Typeahead.defaultProps = {
  filterBy: Typeahead.showAllOnClick, // Show all of the results even if something is selected
  positionFixed: true, // Display the typeahead above scrollbars
  inputProps: {autocomplete: "off"}, // Turn off autocomplete in Chrome
};