Material UI 的 Click-Away Listener 是一个非常实用的组件，允许你在用户单击组件外部时执行特定的操作。这在创建交互式用户界面时尤为重要，例如关闭弹出菜单、对话框或其他显示的组件。本文将详细介绍 Click-Away Listener 的使用，包括其基本用法、属性、方法以及与其他组件结合的示例。

1. 安装 Material UI

确保你在项目中已经安装了 Material UI：

npm install @mui/material @emotion/react @emotion/styled

2. Click-Away Listener 组件概述

ClickAwayListener 组件用于监听点击事件，并根据用户的点击位置执行相应的操作。当用户点击组件外部时，可以触发相应的回调函数。这是创建可交互式 UI 的关键部分。

2.1 基本用法

以下是 ClickAwayListener 的基本用法示例：

import React, { useState } from 'react';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

function BasicClickAway() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };

  const handleClickAway = () => {
    setOpen(false);
  };

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <div>
        <Button onClick={handleClick}>
          {open ? '隐藏' : '显示'} 信息
        </Button>
        {open && (
          <Typography variant="body1">
            这是一些信息，当你点击外部区域时会被隐藏。
          </Typography>
        )}
      </div>
    </ClickAwayListener>
  );
}

export default BasicClickAway;

3. Click-Away Listener 组件的属性

3.1 主要属性

• onClickAway: function

  • 描述: 这个回调函数在用户点击组件外部时被调用。它接收一个事件对象作为参数。

• children: node

  • 描述: ClickAwayListener 的子组件，通常是一个包裹了希望监听点击事件的组件。

3.2 使用示例

以下是使用 ClickAwayListener 的更多示例。

3.2.1 与 Dialog 组件结合使用

import React, { useState } from 'react';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';

function DialogWithClickAway() {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClickAway = () => {
    setOpen(false);
  };

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <div>
        <Button variant="outlined" onClick={handleClickOpen}>
          打开对话框
        </Button>
        <Dialog onClose={handleClickAway} open={open}>
          <DialogTitle>这是一个对话框</DialogTitle>
          <Button onClick={handleClickAway}>关闭</Button>
        </Dialog>
      </div>
    </ClickAwayListener>
  );
}

export default DialogWithClickAway;

3.2.2 与 Popper 组件结合使用

ClickAwayListener 也可以与 Popper 组件一起使用，以实现可交互的工具提示或下拉菜单。

import React, { useState } from 'react';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Popper from '@mui/material/Popper';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

function PopperExample() {
  const [open, setOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
    setOpen((prev) => !prev);
  };

  const handleClickAway = () => {
    setOpen(false);
    setAnchorEl(null);
  };

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <div>
        <Button onClick={handleClick}>切换 Popper</Button>
        <Popper open={open} anchorEl={anchorEl}>
          <Typography sx={{ p: 2 }}>这是 Popper 的内容</Typography>
        </Popper>
      </div>
    </ClickAwayListener>
  );
}

export default PopperExample;

4. Click-Away Listener 与其他组件结合使用

4.1 与 Menu 组件结合使用

使用 ClickAwayListener 可以很方便地在用户点击菜单外部时关闭菜单。

import React, { useState } from 'react';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Button from '@mui/material/Button';

function MenuWithClickAway() {
  const [open, setOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    setAnchorEl(null);
  };

  return (
    <ClickAwayListener onClickAway={handleClose}>
      <div>
        <Button onClick={handleClick}>打开菜单</Button>
        <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
          <MenuItem onClick={handleClose}>选项 1</MenuItem>
          <MenuItem onClick={handleClose}>选项 2</MenuItem>
          <MenuItem onClick={handleClose}>选项 3</MenuItem>
        </Menu>
      </div>
    </ClickAwayListener>
  );
}

export default MenuWithClickAway;

4.2 与 Tooltip 组件结合使用

使用 ClickAwayListener 可以实现更复杂的工具提示逻辑：

import React, { useState } from 'react';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';

function TooltipExample() {
  const [open, setOpen] = useState(false);

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  const handleTooltipClose = () => {
    setOpen(false);
  };

  return (
    <ClickAwayListener onClickAway={handleTooltipClose}>
      <div>
        <Tooltip
          open={open}
          onOpen={handleTooltipOpen}
          onClose={handleTooltipClose}
          title="这是一个工具提示"
        >
          <Button onClick={handleTooltipOpen}>悬停或点击我</Button>
        </Tooltip>
      </div>
    </ClickAwayListener>
  );
}

export default TooltipExample;

5. 总结

Material UI 的 Click-Away Listener 组件是构建响应式和交互式用户界面的重要工具。通过监听用户的点击事件，可以灵活地控制组件的显示和隐藏，提供更好的用户体验。希望这篇博客能帮助你理解和使用 Click-Away Listener，如果有任何问题或需要进一步的示例，请随时提问！