单击覆盖时，Material-ui 对话框未关闭答案

【问题标题】：Material-ui dialog is not closing when overlay is clicked单击覆盖时，Material-ui 对话框未关闭
【发布时间】：2017-01-12 08:37:34
【问题描述】：

我正在使用 material-ui 的对话框。单击覆盖时，不会调用handleClose。当按下“Esc”按钮时，它会被调用。

我已经注入了点击事件。还有什么问题？

import React, { Component, PropTypes } from 'react';

import Dialog from 'material-ui/Dialog';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

// Tap event required
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

class MyComponent extends Component {
  handleClose(){ 
    console.log('I will be closed');
  }

  render() {
    return (
      <div>
        <h1>Modal test</h1>

        <MuiThemeProvider muiTheme={getMuiTheme()}>
          <Dialog
            title="Test Dialog"
            modal={false}
            open={(this.props.active)}
            onRequestClose={this.handleClose}
            autoScrollBodyContent={true}>
            Hello world, I'm a dialogue.
          </Dialog>
        </MuiThemeProvider>
      </div>
    );

  }
}

【问题讨论】：

您的意思是“单击叠加层时”是单击对话框叠加层本身吗？
当我单击覆盖（屏幕的灰色部分）时，不会调用 handleClose。我不确定你指的是什么。
它不会关闭，但您应该会在浏览器上看到控制台日志。
奇怪，不知道是不是依赖什么的有问题……感谢检查
没有登录浏览器控制台？要关闭它，对话框的“打开”属性应该等于您可以更改的内容。您可以将“打开”作为布尔属性放入您的状态并在 handleClose() 中更改其值

标签： reactjs material-ui

【解决方案1】：

您必须为对话框定义 onClose 属性。如您所见：

const [opendialog , setOpendialog] = React.useState(false);
const handleOpen = () => {
    setOpendialog(true);
};
const handleClose = () => {
    setOpendialog(false);
}
return (
    <>
    <Button onClick={handleOpen}>open dialog!</Button>
    <Dialog open={open} onClose={handleClose}>
        <DialogTitle>
            <Typography>
                are you sure?
            </Typography>
        </DialogTitle>
        <Button onClick={handleClose}>No</Button>
    </Dialog>
    </>
);

【讨论】：

【解决方案2】：

根据规范，您不应该这样做，但您可以使用以下属性强制关闭：

<Dialog onBackdropClick={YOUR_CLOSE_FUNCTION_HERE} />

【讨论】：

【解决方案3】：

你必须定义一个关闭对话框的函数，并使用 prop onClose 发送到 Dialog 组件。

您必须记住的一件事是，props disableBackdropClick 不应传递给 Dialog 组件。

示例代码如下

    <Dialog
        open = { props.open }
        // disableBackdropClick
        onClose = {(event, reason) => {
            if (props.onClose) {
                props.onClose(event, reason);
            }
        }}
        >
        { ...props.children }
    </Dialog>

【讨论】：

【解决方案4】：

我刚刚试了一下，效果很好。还有其他与此相关的代码吗？也许重新安装材料 ui 并重试。

【讨论】：

感谢您试用 Hussein - 我怀疑这是一个依赖问题，请检查一下。
也许您必须为组件内部的打开标志定义一个状态变量？