单击覆盖时，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

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

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