React Click Outside 教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00424/article/details/141810626

React Click Outside 教程

react-click-outsideClickOutside component for React.项目地址:https://gitcode.com/gh_mirrors/re/react-click-outside

项目介绍

react-click-outside 是一个用于检测点击事件是否发生在组件外部的 React 库。它通过创建一个自定义的 React Hook 来实现这一功能，适用于需要监听外部点击事件的组件，如对话框、下拉菜单等。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 react-click-outside：

npm install react-click-outside

或者

yarn add react-click-outside

基本使用

以下是一个简单的示例，展示如何在按钮组件中使用 react-click-outside：

import React, { useState } from 'react';
import useClickOutside from 'react-click-outside';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClickOutside = () => {
    setCount(0);
  };

  const ref = useClickOutside(handleClickOutside);

  const handleClick = () => {
    setCount((state) => state + 1);
  };

  return (
    <div>
      <button ref={ref} type="button" onClick={handleClick}>
        Count: {count}
      </button>
    </div>
  );
};

export default App;

应用案例和最佳实践

对话框组件

在对话框组件中，我们通常希望对话框在点击外部区域时关闭。以下是一个示例：

import React, { useState } from 'react';
import useClickOutside from 'react-click-outside';

const Dialog = ({ isOpen, onClose }) => {
  const ref = useClickOutside(() => {
    if (isOpen) {
      onClose();
    }
  });

  if (!isOpen) {
    return null;
  }

  return (
    <div ref={ref} style={{ border: '1px solid black', padding: '10px' }}>
      <p>这是一个对话框</p>
      <button onClick={onClose}>关闭</button>
    </div>
  );
};

const App = () => {
  const [isDialogOpen, setDialogOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setDialogOpen(true)}>打开对话框</button>
      <Dialog isOpen={isDialogOpen} onClose={() => setDialogOpen(false)} />
    </div>
  );
};

export default App;

下拉菜单组件

在下拉菜单组件中，我们希望在下拉菜单外部点击时关闭菜单。以下是一个示例：

import React, { useState } from 'react';
import useClickOutside from 'react-click-outside';

const Dropdown = ({ options, onSelect }) => {
  const [isOpen, setIsOpen] = useState(false);

  const ref = useClickOutside(() => {
    if (isOpen) {
      setIsOpen(false);
    }
  });

  return (
    <div ref={ref}>
      <button onClick={() => setIsOpen(!isOpen)}>选择选项</button>
      {isOpen && (
        <ul>
          {options.map((option, index) => (
            <li key={index} onClick={() => { onSelect(option); setIsOpen(false); }}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

const App = () => {
  const options = ['选项1', '选项2', '选项3'];

  return (
    <div>
      <Dropdown options={options} onSelect={(option) => console.log(option)} />
    </div>
  );
};

export default App;