如何将滚动添加到搜索列表的 listItem 中

Question

我有一个包含 ListItem 和搜索栏的列表。搜索功能根据要求运行良好，并突出显示了 ListItem。现在我正在尝试添加滚动，以便如果搜索项在可见 window 上不可用但无法实现它，则列表滚动到 'includes' 的第一次出现。尝试过 const ref = React.createRef();

如何让它工作？

这里是codesandboxlink

Answer 1

您可以使用 vanilla js 轻松实现这一目标。

首先将所有匹配的 ListItem 的 index 存储在一个状态中：

  const getMatchingListItems = React.useCallback(() => {
    return [...messages]
      .map(({ id, primary, secondary, person }, i) => {
        if (secondary.includes(searchTranscript) && searchTranscript !== "") {
          return i;
        }
      })
      .filter((elmt) => elmt !== undefined);
  }, [searchTranscript]);

  const [matchingListItems, setMatchingListItems] = useState(getMatchingListItems());

用它来定义使用哪个className:

<div
  className={
    matchingListItems.includes(i) ? classes.searchHighLight : ""
  }

最后，当 matchingListItems 更新时，使用 useEffect 挂钩滚动到第一个匹配的 LisItem：

   React.useEffect(() => {
    setMatchingListItems(getMatchingListItems());
  }, [getMatchingListItems, setMatchingListItems]);

  React.useEffect(() => {
    const firstListMatch = matchingListItems[0];

    if (firstListMatch) {
      const firstLi = document.querySelector(
        `ul div:nth-child(${firstListMatch})`
      );
      firstLi.scrollIntoView();
    } else {
      document.querySelector("ul").scrollIntoView();
    }
  }, [matchingListItems]);

你可以用这个 codesandbox 试试。

如何将滚动添加到搜索列表的 listItem 中

How to add scroll into listItem of list on search

javascript

css

scroll

reactjs