Javascript 搜索结果使用reactjs突出显示结果

我试图获得像YouTube这样的搜索结果。只是尝试一下，但我遇到了一些问题。我已经在codesandbox中创建了工作应用程序

我有一个搜索框，当你键入任何东西时，它会像下拉菜单一样显示搜索结果，例如，当你在youtube上搜索时，你将能够看到下面的结果，同样的事情/

我面临的问题是：

假设我输入“a”，现在您将能够在搜索结果div中看到总共6个结果，其中有一个滚动条

1） 因此，第一个结果本身将显示高亮显示的css。当我悬停或使用键导航时，只有higlight css应该出现，我如何才能实现这一点

2） 现在如果我在第二个或第三个结果上悬停，高亮显示css将在第二个或第三个结果中显示，但第一个结果也将显示css。我只想要higlight css一次只需要一个。（youtube搜索中也有相同的功能）

3） 现在只有三个元素是可见的，剩下的三个是你需要滚动的，当我通过箭头键导航时，滚动没有发生，我如何用API实现这一点

4） 在6个结果中，搜索字符串为“a”，如何使该字符串变强，使其保持高亮显示，以便无论搜索什么，都应高亮显示

---

感谢您的帮助！考虑到我们在此沙箱中更新的代码，如果您有任何疑问，请告知我：

您真正需要的是一个

onmouseinter（）

事件处理程序，以使一切正常工作

处理者 加成

{searchResults.map（（项目，索引）=>{
返回(
（this.itemRefs[index]=ref）}
onClick={（）=>this.goToItem（索引）}
className={cursor==索引？'active'：null}
onMouseCenter={（）=>this.handleMouseCenter（索引）}
>
{item.id}
{item.name}
{item.address}

)
})}

---

这样，一次只有一个悬停或向下箭头/向上箭头将生效。因此，只有一个列表项将被突出显示。

@Tobias感谢您的编辑。我怎样才能实现上述目标？不清楚你想要实现什么@LefiTarik你现在能检查一下这个问题吗。我用例子更新了它。你能让我知道更多的细节吗？现在要求非常明确，特别是在@Christopher Ngo接触良好之后！但是只是一个通知，作为一个开发人员，你应该很好地解释你需要什么，而不必提及与某个供应商相关的功能，你可以简单地解释你需要什么，这样可以帮助的人会快速响应……好的。谢谢克里斯托弗。让我检查一下沙箱，如果有什么不对劲，它会让你知道的。还有一个疑问。在我的问题沙箱中，li被分离为一个功能组件。在功能组件中，ref不存在，因此我应该在需要使用ref对组件进行分类的地方更改每个功能组件。或者我该怎么做，这要看情况而定。您是否仍在使用.map（）来迭代和创建该功能组件的多个项目，还是只使用一个项目？是的，我正在使用.map。还有一个例子是当我键入“a”时，我现在悬停在第二个结果上，如果我单击向下箭头，那么第二个和第三个搜索结果将显示为高亮显示，但它应该是第三个，应该高亮显示，不是吗？你可以在回答代码中检查此情况沙盒检查此图像你将能够理解itah好的，查看图像，真奇怪，哈哈。让我试着找一个干净的解决办法。同样对于.map（），只需将每次返回的组件包装在一个div中，并向其传递一个ref。比如：

this.myRefs[index]=ref}>

  handleMouseEnter = index => {
    this.setState({
      cursor: index,
    })
  }

{searchResults.map((item, index) => {
     return (
         <li
            ref={ref => (this.itemRefs[index] = ref)}
            onClick={() => this.goToItem(index)}
            className={cursor === index ? 'active' : null}
            onMouseEnter={() => this.handleMouseEnter(index)}
         >
          <label className="first-lb">{item.id}</label>
          <label className="second-lb">{item.name}</label>
          <label className="third-lb">{item.address}</label>
        </li>
     )
})}