允许在鼠标事件上选择 activeElement

Question

在尝试将项目悬停在下拉建议菜单中时，我正在尝试将该项目设置为 activeElement 和 activeIndex。但是键盘up/down 箭头停止使用此更改。我希望 up/down 箭头键也可以从 activeIndex 中工作。怎么做？这是我的代码

  public itemFocus = (e: any) => {
    let ce = e.currentTarget.id.toString();
    ce = ce.substring(ce.length - 1);
    this._typeahead.getInstance().setState({
      activeIndex: ce,
      activeItem: this.state.options[ce]});
  }

idx 表示结果的迭代器索引

<MenuItem onMouseOver={this.itemFocus} key={idx} option={state} position={idx}>

Answer 1

您似乎走在了正确的轨道上，尽管有更简单的方法可以获取悬停项目的索引和数据。以下应该有效：

注意：以下解决方案不受 API 官方支持，如果包内部发生变化，可能会在没有警告的情况下中断。

<Typeahead
  options={[ ... ]}
  ref={(typeahead) => this._typeahead = typeahead}
  renderMenu={(filteredOptions, menuProps) => (
    <Menu {...menuProps}>
      {filteredOptions.map((option, index) => (
        <MenuItem
          onMouseOver={() => {
            this._typeahead.getInstance().setState({
              activeIndex: index,
              activeItem: option,
            });
          }}
          option={option}
          position={index}>
          {option}
        </MenuItem>
      ))}
    </Menu>
  )}
/>

工作示例：https://codesandbox.io/s/ojz4kzn2vq