滚动 Reactjs 中的问题列表答案

【问题标题】：Scrolling the list Issues in Reactjs滚动 Reactjs 中的问题列表
【发布时间】：2021-06-08 01:05:08
【问题描述】：

我在通过观看this Youtube 教程和here 是该项目的 github 存储库（以防您需要克隆和运行）学习 REACT 时实现了自动完成功能。我实现了它，它按预期工作。但是它没有提供一个小功能，即我无法向下滚动自动完成列表。参考this 图像输出。当我单击侧滚动条时，列表消失了。如何激活它？我还需要为滚动条制作另一个 useEffect 吗？

这是 App.js 代码（虽然与 Github 相同）

import React, { useEffect, useState, useRef } from "react";
import logo from "./logo.svg";
import "./App.css";

const Auto = () => {
  const [display, setDisplay] = useState(false);
  const [options, setOptions] = useState([]);
  const [search, setSearch] = useState("");
  const wrapperRef = useRef(null);

  useEffect(() => {
    const pokemon = [];
    const promises = new Array(20)
      .fill()
      .map((v, i) => fetch(`https://pokeapi.co/api/v2/pokemon-form/${i + 1}`));
    Promise.all(promises).then(pokemonArr => {
      return pokemonArr.map(value =>
        value
          .json()
          .then(({ name, sprites: { front_default: sprite } }) =>
            pokemon.push({ name, sprite })
          )
      );
    });
    setOptions(pokemon);
  }, []);

  useEffect(() => {
    window.addEventListener("mousedown", handleClickOutside);
    return () => {
      window.removeEventListener("mousedown", handleClickOutside);
    };
  });

  const handleClickOutside = event => {
    const { current: wrap } = wrapperRef;
    if (wrap && !wrap.contains(event.target)) {
      setDisplay(false);
    }
  };

  const updatePokeDex = poke => {
    setSearch(poke);
    setDisplay(false);
  };

  return (
    <div ref={wrapperRef} className="flex-container flex-column pos-rel">
      <input
        id="auto"
        onClick={() => setDisplay(!display)}
        placeholder="Type to search"
        value={search}
        onChange={event => setSearch(event.target.value)}
      />
      {display && (
        <div className="autoContainer">
          {options
            .filter(({ name }) => name.indexOf(search.toLowerCase()) > -1)
            .map((value, i) => {
              return (
                <div
                  onClick={() => updatePokeDex(value.name)}
                  className="option"
                  key={i}
                  tabIndex="0"
                >
                  <span>{value.name}</span>
                  <img src={value.sprite} alt="pokemon" />
                </div>
              );
            })}
        </div>
      )}
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <h1>Custom AutoComplete React</h1>
      <div className="logo"></div>
      <div className="auto-container">
        <Auto />
      </div>
    </div>
  );
}

export default App;

请帮我解决这个问题。

【问题讨论】：

标签： javascript reactjs scroll react-hooks

【解决方案1】：

如果我理解正确的话，听起来更像是一个 CSS 问题。尝试将此添加到您的 ./App.css 文件中：

.autoContainer{
  max-height: 350px; overflow-y: auto; overflow-x: hidden;
}

这里是想法：https://codesandbox.io/s/green-flower-zeued?file=/src/App.js:1509-1522

【讨论】：