基于useRef实现clickoutside是什么？如何利用它？

2023-10-02 03:06:14

useRef是一个React Hook，用于在函数组件中获取和修改DOM元素。它可以让你在不编写class的情况下使用state以及其他的React特性。

要使用useRef，你需要在函数组件中调用useRef()，这会返回一个ref对象。然后需要在对应的JSX节点中添加ref属性，这个ref属性值就是调用useRef返回的ref对象。

此时，你就可以通过ref.current来获取到真实的DOM元素。例如，以下代码获取到了一个名为“myInput”的输入框的DOM元素：

const inputRef = useRef();

function MyComponent() {
  return <input ref={inputRef} name="myInput" />;
}

一旦你获取到了真实的DOM元素，你就可以对其进行操作。例如，你可以调用它的focus()方法来聚焦到输入框上：

inputRef.current.focus();

useRef还可以用来实现clickoutside功能。所谓clickoutside，是指当用户点击元素之外的区域时触发某个事件。这在许多场景下都很有用，例如弹出菜单、下拉菜单等。

要实现clickoutside功能，你可以使用以下步骤：

创建一个ref对象来保存元素的DOM元素。
在元素的父元素上添加一个click事件监听器。
在click事件监听器中，检查点击的目标元素是否属于元素的DOM元素。
如果点击的目标元素不属于元素的DOM元素，则触发clickoutside事件。

以下是一个实现clickoutside功能的代码示例：

import { useRef, useEffect } from "react";

function ClickOutside(props) {
  const ref = useRef();

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        props.onClickOutside();
      }
    };

    document.addEventListener("click", handleClickOutside);

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

  return <div ref={ref}>{props.children}</div>;
}

export default ClickOutside;