Reactjs 允许在鼠标事件中选择activeElement

在尝试将某个项目悬停在下拉建议菜单中时，我尝试将该项目设置为

activeElement

和

activeIndex

。但键盘上的上/下箭头停止使用此更改。我想让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}>

---

虽然有更简单的方法获取悬停项目的索引和数据，但您似乎走在了正确的轨道上。以下方面应起作用：

注意：以下解决方案不受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>
  )}
/>

this.\u typeahead=typeahead}
renderMenu={（filteredOptions，menuProps）=>(
{filteredOptions.map（（选项，索引）=>(
{
这是。_typeahead.getInstance（）.setState({
activeIndex:index，
activeItem：选项，
});
}}
option={option}
位置={index}>
{option}
))}
)}
/>

---

工作示例：

在对菜单项进行分组时，是否需要一种不同的方法来执行相同的操作。箭头键不适用于这些->它不起作用的原因是

idx

在上限范围内递增，因此在调用

onMouseOver

处理程序时总是

50

。您需要在声明项的同一范围内声明每个项的索引。以下方面应起作用：