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

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 />

您还可以使用disableEscapeKeyDownprop在 Esc 键按下时禁用关闭对话框

Answer 2

只需删除该onClose方法即可

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

Answer 3

disableBackdropClick 在 Material UI v5 中不起作用。

对话框 API（下一个）

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

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