Question

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

  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

允许在鼠标事件时选择activeElement

1 个答案: