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

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

this.onFocus（e）}
onKeyDown={（）=>this.onChange（）}
ref={（typeahead）=>this.typeahead=typeahead}
selected={this.props.single}
RenderNuItemChildren={（选项）=>(
this.handleClick（e）}值={option.label}>
{option.label}
)}
/>

来自：

filterBy

prop可以使用自定义函数，允许您根据需要过滤结果

例如：

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

---

@ericgio的回答对我不起作用，因为

react bootstrap typeahead

不再使用name字段。尽管如此，我还是用它在下面创建了我自己的Typeahead类，其中包含许多自定义选项，包括单击时显示所有选项。当multiple设置为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
};

从“react bootstrap Typeahead”导入{Typeahead as react BootstrapTypeahead}；
从“react bootstrap typeahead/lib/utils/defaultFilterBy”导入defaultFilterBy；
从“React”导入React；
/**
*此类负责在typeahead对象上设置一些合理的默认值。
*/
导出默认类Typeahead扩展React.Component{
建造师（道具）{
超级（道具）；
}
/**
*当您点击输入框时，即使选择了某些内容，也会显示所有值。请参阅更多
*在这里：https://stackoverflow.com/a/50376581/491553
*/
静态showAllOnClick（选项、道具）{
如果（多个道具）{
const newProps={…props，filterBy:[“label”]}；
返回defaultFilterBy（选项，newProps）；
}否则{
if（props.selected&&props.selected.length）{
//如果有选择，则显示所有选项。
返回true；
}
//否则，根据某些条件进行筛选。
返回option.label&&option.label.toLowerCase（）.indexOf（props.text.toLowerCase（））！=-1；
}
}
render（）{
返回；
}
}
Typeahead.defaultProps={
filterBy:Typeahead.showAllOnClick，//即使选择了某些内容，也显示所有结果
positionFixed:true，//在滚动条上方显示typeahead
inputProps:{autocomplete:“off”}，//在Chrome中关闭autocomplete
};

您是否尝试过

typeaheadMinLength

？不，它是道具吗？问这个问题是因为我找不到足够的相关信息。我只能看到prop minLength，您可以使用它指定在组件显示过滤结果之前用户必须输入的字符数。它是相同的。所以给它一个值

0

。因此，当用户关注输入时，结果将被填充。我尝试过，它不起作用：/这行中设置的

text

变量的位置可能重复<代码>返回选项.name.toLowerCase（）.indexOf（text.toLowerCase（））！==-1;@xela84:这是

props

的一部分，我将更新我的答案。过滤器中的props在这里是什么？@Aashiqahmed:

props

表示组件的部分内部状态

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

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

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
};