Question

作为一种学习手段，我正在尝试构建自动完成功能。我正在关注以下示例：

https://codesandbox.io/s/8lyp733pj0。

我看到此解决方案有两个问题：

1。）与鼠标悬停和击键冲突。如果我使用键盘导航列表，则活动项目将突出显示，并且如果我同时使用鼠标，则另一个项目将突出显示。这样会产生2个突出显示的字段。

2。）如果我通过按Enter选择一个项目，它将用所选文本填充输入字段，但是如果我再次按Enter，它将将该文本更改为我相信的索引0项目。

有人可以帮助我了解如何解决这些问题。我曾尝试将鼠标悬停并专注于CSS，但仍无法达到预期的结果。

我的方法（不确定这是否正确）：

如果使用键盘，则应禁用鼠标事件，反之亦然。
我还尝试过为enter事件删除this.setState（{activeSuggestion：0}）。

感谢您的帮助-我花了一些时间来了解React的状态概念。

Answer 1

onKeyDown函数可以正确更新activeSuggestion的值。我不建议您在看不到activeSuggestion时在选择中添加滚动。
我认为您需要使用activeSuggestion函数更新onMouseEnter的值。
这样做时，请记住从styles.css中删除第32行：.suggestions li:hover。

只有带有.suggestion-active的元素必须具有活动样式。不是徘徊的。这个想法是onMouseEnter必须更新activeSuggestion的值。

这是代码：

// Autocomplete.jsx

//in line 84, after function onKeyDown, add:
  onMouseEnter = e => {
    try {
      e.persist();
      const currentIndex = parseInt(e.target.dataset.index, 10);
      this.setState({ activeSuggestion: currentIndex });
    } catch (reason) {
      console.error(reason);
    }
  }


// then, create const onMouseEnter after the render() method:
  render() {
    const {
      onChange,
      onClick,
      onKeyDown,
      onMouseEnter,
      state: {
        activeSuggestion,
        filteredSuggestions,
        showSuggestions,
        userInput
      }
    } = this;

// In the li nodes (line 123), add props onMouseEnter and data-index:
        <li
          className={className}
          key={suggestion}
          onClick={onClick}
          onMouseEnter={onMouseEnter}
          data-index={index}
        >
          {suggestion}
        </li>

记住要从styles.css中删除第32行：.suggestions li:hover。

希望有帮助。

如何解决悬停冲突并在ReactJS自动完成中输入事件？

1 个答案: