如何在点击 React js 中的子组件外部而不是父组件时触发模糊

在 React js 中，如果您想要在单击组件外部时触发模糊，则可以使用一个特殊的 React 钩子来实现。

安装

首先，您需要安装 useClickOutside 钩子，这是一个 React 自定义钩子，它可以监听 DOM 操作并在单击组件外部时触发回调。您可以使用 npm 或 yarn 进行安装：

npm install @hook/use-click-outside

或者

yarn add @hook/use-click-outside

使用

使用 useClickOutside 钩子非常简单。只需要将该自定义钩子绑定到您希望进行单击操作的组件上即可。例如：

import React, { useRef, useState } from 'react';
import useClickOutside from '@hook/use-click-outside';

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

  useClickOutside(ref, () => setIsOpen(false));

  return (
    <div>
      <div ref={ref}>
        <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
        {isOpen && (
          <ul>
            <li>Option One</li>
            <li>Option Two</li>
            <li>Option Three</li>
          </ul>
        )}
      </div>
    </div>
  );
}

export default App;

在上面的示例中，当用户单击下拉菜单之外的任何地方时，useClickOutside 钩子将调用 setIsOpen(false)。 setIsOpen 是 React 提供的一个方法，它可以更新组件的状态并通过重新渲染来确保 UI 反映这种变化。

小结

使用 useClickOutside 钩子可以轻松地在 React 应用程序中实现单击模糊效果，这使得用户体验更加友好和直观。 只需要将它绑定到需要进行单击操作的组件上，然后指定回调函数即可。 希望这篇文章能够帮助您充分了解 React 自定义钩子的使用，并加强您的前端开发技能。