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

Question

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

  }
}

Answer 1

我刚刚试用了一下，效果很好。还有其他与此相关的代码吗？也许重新安装 material ui 然后再试一次。

Answer 2

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

<Dialog onBackdropClick={YOUR_CLOSE_FUNCTION_HERE} />

Answer 3

您必须为对话框定义 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>
    </>
);

Answer 4

您必须定义一个用于关闭对话框的函数，并将其与 prop onClose 一起发送到 Dialog 组件。

有一件事你必须记住，道具 disableBackdropClick 不应该传递给 Dialog 组件。

示例代码如下

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

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

Material-ui dialog is not closing when overlay is clicked

reactjs

material-ui