Разрешить выбор activeElement для события мыши - PullRequest
Новая
       13

Разрешить выбор activeElement для события мыши

0 голосов
/ 08 марта 2019

При попытке навести элемент в раскрывающемся меню предложений, я пытаюсь сделать этот элемент 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}>

1 Ответ

1 голос
/ 11 марта 2019

Вы, кажется, на правильном пути, хотя есть более простые способы получить индекс и данные обнаруженного элемента.Должно работать следующее:

Примечание. Следующее решение официально не поддерживается 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

...