Question

当我打开一个对话框并打开另一个对话框时，我点击了它就会关闭它们。

有没有办法让逃生只关闭最顶层的对话框？

Answer 1

我不认为没有一些麻烦就可以做到这一点。在对话框渲染功能中，渲染了这个eventlistener，并且没有允许你覆盖它的道具。

{open &&
   <EventListener
      target="window"
      onKeyUp={this.handleKeyUp}
      onResize={this.handleResize}
   />
}

调用此方法。

handleKeyUp = (event) => {
    if (keycode(event) === 'esc') {
      this.requestClose(false);
    }
};

source

然而，您可以深入了解 node_modules / material-ui / Dialog / dialog.js 并删除该代码或进行更改。删除此行将阻止它关闭esc，但将计入所有对话框。也许在那之后你可以在自己的类中实现一个keycode事件监听器来处理模态的关闭。

if ((0, _keycode2.default)(event) === 'esc') {
   _this2.requestClose(false);
}

编辑：可能的解决方案。

我创建了2个组件，一个DialogContainer类组件和一个Dialog功能组件。要使用此功能，您必须npm install --save react-event-listener。

为此，您仍需要从node_modules 中删除上述代码。

当只打开一个对话框时，它会在单击esc时关闭该对话框。如果打开两个对话框，它将首先关闭dialog2并使dialog1保持打开状态。

<强> DialogContainer.js

import React, { Component } from 'react';
import Dialog from './Dialog';
import RaisedButton from 'material-ui/RaisedButton';
import EventListener from 'react-event-listener';

export default class DialogContainer extends Component {
  state = {
    openDialog1: false,
    openDialog2: false
  };

  handleDialog1Open = () => {
    this.setState({ openDialog1: true });
  };

  handleDialog2Open = () => {
    this.setState({ openDialog2: true });
  };

  handleDialog1Close = () => {
    this.setState({ openDialog1: false });
  };

  handleDialog2Close = () => {
    this.setState({ openDialog2: false });
  };

  handleKeyUp = (event) => {
    // 27 = esc
    if (event.keyCode === 27) {
      if (this.state.openDialog1 && this.state.openDialog2) {
        this.handleDialog2Close();
      } else {
        this.handleDialog1Close();
        this.handleDialog2Close();
      }
    }
  };

  render() {
    return (
     <div>
       {(this.state.openDialog1 || this.state.openDialog2) &&
       <EventListener
        target="window"
        onKeyUp={this.handleKeyUp}
       />}
       <RaisedButton label="Open1" onTouchTap={this.handleDialog1Open}/>
       <RaisedButton label="Open2" onTouchTap={this.handleDialog2Open}/>
       <Dialog
        openOtherDialog={this.handleDialog2Open}
        open={this.state.openDialog1}
        handleClose={this.handleDialog1Close}
        number={1}/>
       <Dialog
        open={this.state.openDialog2}
        handleClose={this.handleDialog2Close}
        number={2}/>
     </div>
    )
  }
};

<强> Dialog.js

import React from 'react';
import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';

const DialogCustom = ({ open, handleClose, number, openOtherDialog}) => {
  return (
   <div>
     <Dialog
      title="Dialog"
      modal={false}
      open={open}
      onRequestClose={handleClose}
     >
       {`this is dialog ${number}`}
       {openOtherDialog &&
       <RaisedButton label="Open2" onTouchTap={openOtherDialog}/>
       }
     </Dialog>
   </div>
  );
};

export default DialogCustom;

Answer 2

几乎总是有一个比同时打开两个对话框/模态更好的解决方案。在我们使用MUI的材料设计应用程序中，我们有几次出现这种情况。我们处理它的方式：当“顶部”对话框打开时关闭“下面”对话框。然后（如果需要），您可以在关闭“顶部”对话框时重新打开“底层”对话框。看起来很多工作，但堆叠对话框在代码和UX考虑因素方面都变得棘手。

从嵌套的材料-ui对话框中转义

2 个答案: