如何处理“外部”点击对话框（模态）？

Question

单击框外时我的框关闭，使我丢失所有输入。 我希望我的框仅在单击取消按钮时关闭。 我不确定是什么让它在外面点击时关闭。 有什么帮助吗？

我正在使用@material-ui/core

  _close() {
        DeviceCreationActions.close();
    }

render() {
        const actions = [
            <Button
                id="device-create-dialog-close"
                key="device-create-dialog-close"
                onClick={this._close}
            >
              {this.context.intl.formatMessage({id: 'Cancel'})}
            </Button>
        ];

        if (0 < this.state.stepIndex) {
            actions.push(<Button
                id="device-create-dialog-back"
                key="device-create-dialog-back"
                onClick={this._previousStep.bind(this)}
              >
                {this.context.intl.formatMessage({id: 'Back'})}
              </Button>
            );
        }

        if (
            (1 >= this.state.stepIndex && 0 < this.state['formStep' + this.state.stepIndex].length) ||
            (0 < this.state.stepIndex)
        ) {
            actions.push(<Button
                id="device-create-dialog-next"
                key="device-create-dialog-next"
                onClick={2 === this.state.stepIndex ? this._save.bind(this) : this._nextStep.bind(this)}
              >
                {this.context.intl.formatMessage({id: 2 === this.state.stepIndex ? 'Create' : 'Next'})}
              </Button>
            );
        }

Answer 1

disableBackdropClick在 Material UI v5 中不起作用。

对话 API（下）

您可以使用迁移指南中的代码，通过检测关闭事件的来源，通过onClose prop处理每个关闭源。

<Dialog onClose={handleClose} />

并使用处理程序停止它

const handleClose = (event, reason) => {
    if (reason && reason == "backdropClick") 
        return;
    myCloseModal();
}

Answer 2

我认为您需要的是disableBackdropClick传递给<Modal />组件

<Modal disableBackdropClick />

您还可以使用disableEscapeKeyDown道具禁用 Esc 按键上的关闭对话框

Answer 3

只需删除onClose方法

  <Dialog
     sx={{
       position: 'absolute',
       left: 300,
       top: 35
     }}
     maxWidth="lg"
    open={open}
    // onClose={handleClose}
   .....

Answer 4

或者如果没有定义 onClose ......

<Dialog
  onClose={(event, reason) => reason !== 'backdropClick'}
/>

Answer 5

const handleClose = (e, redirect) => {

        if (redirect === 'backdropClick') {
            return false
        }

};

Answer 6

您可以创建一个类似的组件，如下所示：

import React, { ReactNode } from "react";

export function CustomDialog(props: {
  open: boolean;
  children: ReactNode;
}) {
  if (!props.open) return <></>;
  return (
    <div
      style={{
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
      }}
    >
      {props.children}
    </div>
  );
}

希望这可以帮助！

Answer 7

这也是我的问题，似乎没有人能很好地回答它。 这就是我所做的。

从<Dialog >包装器中删除onClose ，即<Dialog>的外观如下：

<Dialog
    sx={{
        position: 'absolute',
        left: 300,
        top: 35
    }}
    maxWidth="lg"
    open={open}
    // onClose={handleClose}      <<<<<<<
    ....
>

最后，将handleClose函数添加到close按钮的onClick事件中。

<Button
    color="primary"
    size="large"
    type="submit"
    variant="contained"
    onClick={handleClose}
>
    Close
</Button>

你的问题将得到解决。

Answer 8

const handleClose = (event, reason) => {
    if (reason && reason == "backdropClick" && "escapeKeyDown") 
        return;
    myCloseModal();
}

这将防止模态关闭外部点击和退出按钮

Answer 9

在您的 Dialog 标记中删除 onClose 事件 function。 然后只需在下面添加一个按钮让我们说“取消”然后您可以调用 function 关闭对话框

const handleClose = () => {
 setOpen(false)
}

<Dialog
  fullWidth={true}
  open={open}
>
....
 <DialogActions>
    <Button onClick={handleClose} disabled={loading}>Cancel</Button>
 </DialogActions>
</Dialog>

Answer 10

只需在您的组件中添加“disableBackdropClick”道具。 这将限制（禁用）您的弹出窗口或对话框的外部点击。

    //Example
    <DialogCss
      style={{ zIndex: 2000 }}
      open={ruleBoxOpen}
      keepMounted
      onClose={() => setRuleBoxOpen(false)}
      aria-labelledby="alert-dialog-slide-title"
      aria-describedby="alert-dialog-slide-description"
      disableBackdropClick
    >

Answer 11

由于disableBackdropClick在最新版本的 material ui 中已被弃用，因此更简单的方法是从对话框属性中删除onClose并在DialogTitle上添加一个按钮并在单击将打开对话框的 state 设置为 false 的按钮后触发handleClose function

<Dialog
  // onClose={handleClose} // the line to be removed
  open={dialog.open}
  fullWidth
  maxWidth="md"
  >
  <DialogTitle
    sx={{
      display: 'flex',
      alignItems: 'center',
    }}
  >
    <Typography
      variant="h5"
      textAlign="center"
      component="h1"
      gutterBottom
      sx={{
        pl: 2,
      }}
    >
      {dialog.action === 'add'
        ? 'Ajouter une question'
        : 'Editer la question'}
    </Typography>
    
    {/*Fire handleClose after a click on close button*/}
    <IconButton onClick={handleClose} sx={{ ml: 'auto' }}>
      <CloseIcon />
    </IconButton>
  </DialogTitle>
  <QuestionForm
    dimensionId={dimensionId}
    action={dialog.action}
    questionData={dialog.data}
    handleClose={handleClose}
    setQuestions={setQuestions}
    setRows={setRows}
  />
</Dialog>