Question

我正在使用material-ui的对话框。单击叠加层时，不会调用handleClose。当＆＃34; Esc＆＃34;按下按钮，它被调用。

我注入了点击事件。还有什么不对？

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

我刚刚尝试过，它运行正常。还有其他与此相关的代码吗？也许重新安装材料ui并再试一次。

Answer 3

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

IEnumerable<XmlNode> GetAllSucceedingSiblingNodes (XmlNode node)
{
    var currentNode = node.NextSibling; // Use currentNode = node if you want to include searched node
    while(currentNode!=null)
    {
        yield return currentNode;
        currentNode = currentNode.NextSibling;
    }
}

Answer 4

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

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

示例代码如下

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

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

4 个答案: