Reactjs 如何在react引导typeahead中隐藏空标签

我正在我的一个应用程序中使用react引导typeahead模块。除了一种情况外，这一切正常

如果没有结果，我无法提交表格。在这种情况下，我得到一个禁用的选项，没有找到匹配项

我使用了prop emptyLabel=“”，它给出了如下所示的结果

在这两种情况下，当我按ESC键时，该选项消失，然后，我就可以提交我的表格了

理想的结果是摆脱这个选项。我们将非常感谢您的帮助

这是我的密码

<form onSubmit={this.formSubmit}>
  <Typeahead
    labelKey="name"
    flip={true}
    dropup={true}
    autoFocus={true}
    options={this.state.options}
    ref={(typeahead) => this.typeahead = typeahead}
    id="qbox"
    placeholder="Type your queries here..."
    onInputChange={this.updateText}
    onBlur={(e) => this.updateText(e.target.value, e)}
    onChange={this.valueChanged}
    maxResults={5}
    minLength={5}
  />
  <button type="submit">Submit</button>
</form>

this.typeahead=typeahead}
id=“qbox”
占位符=“在此处键入查询…”
onInputChange={this.updateText}
onBlur={（e）=>this.updateText（e.target.value，e）}
onChange={this.valueChanged}
maxResults={5}
minLength={5}
/>
提交

隐藏菜单 您需要为何时呈现菜单添加自己的逻辑，因为

emptyLabel

的falsy值不再在v4中隐藏菜单。从：

此行为是在

renderMenu

返回

null

之前引入的遗留解决方案。不再是这样，现在应该使用renderMenu来实现该行为

当没有结果时，通过将以下内容传递到

renderMenu

，可以隐藏菜单：

<Typeahead
  ...
  renderMenu={(results, menuProps) => {
    // Hide the menu when there are no results.
    if (!results.length) {
      return null;
    }
    return <TypeaheadMenu {...menuProps} options={results} />;
  }}
/>

{
//没有结果时隐藏菜单。
如果（！results.length）{
返回null；
}
返回；
}}
/>

提交表格 当菜单打开时，typeahead会阻止表单提交，以防止意外提交。您可以通过添加以下内容来解决此问题：

<Typeahead
  ...
  onKeyDown={(e) => {
    // Submit the form when the user hits enter.
    if (e.keyCode === 13) {
      this.form.submit();
    }
  }}
/>

{
//当用户点击enter键时提交表单。
如果（如keyCode===13）{
这个.form.submit（）；
}
}}
/>

把它们放在一起

this.form=form}>
{
//当用户点击enter键时提交表单。
如果（如keyCode===13）{
这个.form.submit（）；
}
}}
选项={options}
占位符=“在此处键入查询…”
renderMenu={（结果、菜单）=>{
//没有结果时隐藏菜单。
如果（！results.length）{
返回null；
}
返回；
}}
/>
提交

---

实例：

您能提供一些详细信息吗，比如分享您面临问题的代码片段。@MonikaMangal编辑了问题以包含代码。@Jacob Nelson您使用的是什么版本？我对版本不太确定。但是从package.json，我得到了这个数字4.0.0-alpha.10谢谢，Eric。让我试试这个解决方案。嗨，埃里克，我试过这个解决方案，但出现以下错误<代码>错误：一个或多个选项没有有效的标签字符串。检查labelKey道具，确保它与正确的选项键匹配，并提供用于筛选和显示的字符串。请帮助我解决此问题。嗨，Eric，更新：将

labelKey=“name”

添加到

TypeaheadMenu

解决了上述错误。但是，在按ENTER键时，表单不会被提交。我现在正在研究这个问题。嗨，Eric，在做了这个更改之后，我出现了以下错误，

警告：失败的道具类型：道具搜索在Highlighter中标记为必需，但其值未定义。在Highlighter中（由TypeaheadMenu创建）

@JacobNelson:更新了答案，添加了额外的代码和一个实例。

<form ref={(form) => this.form = form}>
  <Typeahead
    id="rbt-example"
    onKeyDown={(e) => {
      // Submit the form when the user hits enter.
      if (e.keyCode === 13) {
        this.form.submit();
      }
    }}
    options={options}
    placeholder="Type your queries here..."
    renderMenu={(results, menuProps) => {
      // Hide the menu when there are no results.
      if (!results.length) {
        return null;
      }
      return <TypeaheadMenu {...menuProps} options={results} />;
    }}
  />
  <button type="submit">Submit</button>
</form>