如何使用material-ui处理“外部”单击对话框（模态）答案

【问题标题】：How to handle "outside" click on Dialog (Modal) with material-ui如何使用material-ui处理“外部”单击对话框（模态）
【发布时间】：2019-12-11 05:55:26
【问题描述】：

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

我正在使用@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>
            );
        }

【问题讨论】：

可以分享Box中的代码吗？还是涉及更多代码？

标签： javascript reactjs dialog modal-dialog material-ui

【解决方案1】：

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

<Modal disableBackdropClick />

您还可以使用 disableEscapeKeyDown prop 禁用 Esc 键时关闭对话框

【讨论】：

现在已弃用

【解决方案2】：

disableBackdropClick 在 Material UI v5 中不起作用。

Dialog API (next)

您可以使用迁移指南中的代码：

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

【讨论】：

【解决方案3】：

只需删除onClose 方法

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

【讨论】：

删除 onClose 也会删除按 ESC 键关闭对话框的功能