reactjs - 单击叠加层时，Material-ui 对话框未关闭

Question

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

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

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 对话 Prop 。如你看到的:

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