如何处理 "outside" 单击对话框（模态）？

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 传递给 <Modal /> 组件

<Modal disableBackdropClick />

您还可以使用 disableEscapeKeyDown prop

禁用按 Esc 键时关闭对话框

Answer 2

disableBackdropClick 不适用于 Material UI v5.

Dialog API (next)

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

<Dialog onClose={handleClose} />

并使用处理程序停止它

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

Answer 3

只需删除 onClose 方法

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

Answer 4

您可以创建类似的组件，例如：

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>
  );
}

希望对您有所帮助！

如何处理 "outside" 单击对话框（模态）？

How to handle "outside" click on Dialog (Modal)?

javascript

dialog

modal-dialog

reactjs

material-ui