css - 如何修复 ReactJS 自动完成中的悬停冲突和输入事件？

Question

作为一种学习方式，我正在尝试构建一个自动完成功能。我正在关注这个例子:

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

我发现此解决方案有两个问题:

1.) 与鼠标悬停和按下键冲突。如果我使用键盘导航列表，事件元素会突出显示，如果我同时使用鼠标，另一个元素会突出显示。这会导致 2 个突出显示的字段。

2.) 如果我按 enter 选择一个元素，它将用所选文本填充输入字段，但如果我再次按 enter，它将将该文本更改为我认为的索引 0 元素。

有人可以帮助我了解如何解决这些问题。我已经尝试将 hover 和 focus 用于 css，但它仍然没有达到预期的结果。

我的方法(不确定这是否正确):

• 如果正在使用键盘，则应禁用鼠标事件，反之亦然。
• 我还尝试为输入事件删除 this.setState({activeSuggestion: 0})。

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

Answer 1

• onKeyDown 函数正确更新了 activeSuggestion 的值。当 activeSuggestion 不可见时，我建议您在选择中添加一个滚动条。
• 在我看来，您需要使用 onMouseEnter 函数更新 activeSuggestion 的值。
• 执行此操作时，请记住从 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。

希望对您有所帮助。