React clickoutside 的实现

39 min read

在React中，可以通过以下步骤来实现click outside功能：

  1. 创建一个自定义的Hook，例如useClickOutside，用于处理click outside逻辑。
import { useEffect } from "react";

const useClickOutside = (ref, handler) => {
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        handler();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref, handler]);
};

export default useClickOutside;
  1. 在使用click outside逻辑的组件中引入自定义Hook。
import React, { useRef, useState } from "react";
import useClickOutside from "./useClickOutside";

const Component = () => {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  const closeDropdown = () => {
    setIsOpen(false);
  };

  useClickOutside(ref, closeDropdown);

  return (
    <div>
      <button onClick={toggleDropdown}>Toggle Dropdown</button>
      {isOpen && (
        <div ref={ref} className="dropdown">
          Dropdown Content
        </div>
      )}
    </div>
  );
};

export default Component;

在上述代码中，我们使用useRef创建了一个ref来引用dropdown的包裹元素。在点击outside时，会触发closeDropdown函数将isOpen状态设为false，从而关闭dropdown。通过调用useClickOutside Hook，并将ref和closeDropdown函数作为参数传递给它，我们可以监听mousedown事件，判断点击的元素是否位于dropdown以外，从而实现click outside功能。

请注意，这个例子中我们只是简单地通过display属性来控制dropdown的显示与隐藏。实际使用时，你可能需要根据点击/非点击状态来处理更复杂的逻辑。