javascript Reactjs关闭模式滚动[复制]

ljo96ir5 于 2022-12-10 发布在 Java

关注(0)|答案(2)|浏览(96)

此问题在此处已有答案：

React setState hook from scroll event listener（5个答案）
12小时前关门了。
在我的Next js应用程序中，我创建了一个Modal。当在modal容器外单击时，这个modal会关闭。但是当用户在外面滚动时，我如何让它自己关闭呢？
Page.js

const [showTypeModal, setShowTypeModal] = useState(false);

const handleTypeModalClose = () => setShowTypeModal(false);

<TypeModal onClose={handleTypeModalClose} visible={showTypeModal} />

TypeModal.js组件

const handleOnClose = (e) => {
    if (e.target.id === "container" || e.target.id === "inner") onClose();
  };
  if (!visible) return null;

return (
    <div
      id="container"
      onClick={handleOnClose}
      className="fixed top-44 left-0 right-0 bottom-0 bg-gray-400 bg-opacity-30 backdrop-blur-sm hidden md:flex"
    >
      <div id="inner" className="w-3/6" onClick={handleOnClose} />
      <div className="h-[60%] w-1/5 bg-white drop-shadow-md rounded-3xl flex flex-col justify-evenly items-start overflow-auto">
        {homeType.map((type) => {
          return (
            <div
              key={type.id}
              onClick={() => dispatch(addType(type.name))}
              className="hover:bg-[#f0fcfb] cursor-pointer w-full h-14 pl-10  last:rounded-b-3xl first:rounded-t-3xl flex items-center"
            >
              {type.name}
            </div>
          );
        })}
      </div>
    </div>
  );

我想要的是，当用户在“容器”div中滚动时，它会关闭，而不是在“内部”div中。
我试过useEffect，但这会关闭所有卷轴。

useEffect(() => {
    window.addEventListener("scroll", onClose);
    return () => window.removeEventListener("scroll", onClose);
  }, []);

JavaScript

来源：https://stackoverflow.com/questions/74739770/react-js-close-modal-on-scroll

2条答案

按热度按时间

o8x7eapl1#

您可以为container元素设置一个ref，并在其上设置scroll事件，而不是整个window。

import { useRef } from 'react';

  // ... code

  const containerRef = useRef(null);
  return (
    <div
      id="container"
      onClick={handleOnClose}
      className="fixed top-44 left-0 right-0 bottom-0 bg-gray-400 bg-opacity-30 backdrop-blur-sm hidden md:flex"
      ref={containerRef}
    >
      <div id="inner" className="w-3/6" onClick={handleOnClose} />
      <div className="h-[60%] w-1/5 bg-white drop-shadow-md rounded-3xl flex flex-col justify-evenly items-start overflow-auto">
        {homeType.map((type) => {
          return (
            <div
              key={type.id}
              onClick={() => dispatch(addType(type.name))}
              className="hover:bg-[#f0fcfb] cursor-pointer w-full h-14 pl-10  last:rounded-b-3xl first:rounded-t-3xl flex items-center"
            >
              {type.name}
            </div>
          );
        })}
      </div>
    </div>
)

和里面的useEffect挂钩。

useEffect(() => {
      if (containerRef.current) {
      containerRef.current.addEventListener("scroll", onClose);
        return () => containerRef.current.removeEventListener("scroll", onClose);
    }
  }, [containerRef]);

赞(0）回复(0）举报 2022-12-10

tjrkku2a2#

只需将on Scroll事件添加到您的主div或任何您想要的位置，并调用setState，使modal为false。

<div
  id="container"
  onScroll={handleOnClose}
  onClick={handleOnClose}
  className="fixed top-44 left-0 right-0 bottom-0 bg-gray-400 bg-opacity-30 backdrop-blur-sm hidden md:flex"
>
  <div id="inner" className="w-3/6" onClick={handleOnClose} />
  <div className="h-[60%] w-1/5 bg-white drop-shadow-md rounded-3xl flex flex-col justify-evenly items-start overflow-auto">
    {homeType.map((type) => {
      return (
        <div
          key={type.id}
          onClick={() => dispatch(addType(type.name))}
          className="hover:bg-[#f0fcfb] cursor-pointer w-full h-14 pl-10  last:rounded-b-3xl first:rounded-t-3xl flex items-center"
        >
          {type.name}
        </div>
      );
    })}
  </div>

赞(0）回复(0）举报 2022-12-10

我来回答

javascript Reactjs关闭模式滚动[复制]

2条答案

相关问题

热门标签

最新问答