MUI如何控制在组件外部单击，组件本身将关闭

Question

我正在学习MUI5组件设计。有人能告诉我，控制在组件外部单击，组件本身将关闭的逻辑在哪里吗？

我从souce代码中找不到它。

它已应用于select组件和dialog组件。

Answer 1

有一个名为ClickAwayListener的组件可用于处理OutSideClick，您需要将select或dialog组件封装到其中。

您只需要将一个名为onClickAway的道具的函数传递给ClickAwayListener组件，就可以在单击外部时处理这种情况。

这是MUI官方文件中的一个演示示例。

Answer 2

我们可以使用ClickAwayListener组件以以下方式包装实际组件，并在实际组件外部单击时禁用。

import * as React from 'react'
import { Paper, Box, ClickAwayListener } from '@mui/material'

export default function ClickAway() {
const [open, setOpen] = React.useState(false)
const handleClick = () => {
setOpen((prev) => !prev)
}
const handleClickAway = () => {
setOpen(false)
}
const styles = {
position: 'absolute',
top: 28,
right: 0,
left: 0,
zIndex: 1,
border: '1px solid',
p: 1,
bgcolor: 'background.paper',
}
return (
<ClickAwayListener onClickAway={handleClickAway}>
<Paper sx={{ position: 'relative' }}>
<button type='button' onClick={handleClick}>
Open menu dropdown
</button>
{open ? (
<Box sx={styles}>
Click me, I will stay visible until you click outside.
</Box>
) : null}
</Paper>
</ClickAwayListener>
)
}