reactjs - 有没有办法在 React Bootstrap Typeahead 中挂钩键盘菜单导航或选择？

Question

我正在使用 React Bootstrap Typeahead 来浏览一组树数据。每棵树都有一个我需要访问的 id，但我不希望它成为 labelKey。

我试过绑定 onFocus，但菜单项似乎从来没有获得它。onClick 工作正常，但我也需要支持键盘导航。将 onKeyPress 添加到菜单项似乎没有任何作用。

任何帮助表示赞赏。提前致谢。

以下是相关代码：

<Typeahead
      filterBy={filterByFields}
      id='typeahead-search'
      labelKey={(option) => `${option.scientific_name}`}
      onInputChange={this.startSearch} // fills props.suggestions
      options={this.props.suggestions ? this.props.suggestions : []}
      placeholder="Enter a tree name"
      renderMenuItemChildren={(option) => (
        <div
          <!--this is the data I need -->
          data-tree-id={option.tree_id} 
          onClick={this.dropdownClickHandler}
        >
          <div>
            <span>
              {option.scientific_name}
            </span>
          </div>
          <small>
            <span>
              {option.common_name}
            </span>
          </small>
        </div>
      )}
    />

标签： reactjsreact-bootstrap-typeahead