Когда у меня открывается один диалог, и он открывается другим, и я ударяю его, он закрывает оба.Выход из диалогового окна вложенного материала-ui
Есть ли способ сделать побег только закрытием самого большого диалога?
Когда у меня открывается один диалог, и он открывается другим, и я ударяю его, он закрывает оба.Выход из диалогового окна вложенного материала-ui
Есть ли способ сделать побег только закрытием самого большого диалога?
Я не думаю, что это будет возможно без каких-либо хлопот. В функции визуализации диалога этот eventlistener визуализируется, и нет опоры, которая позволяет вам перезаписать это.
{open &&
<EventListener
target="window"
onKeyUp={this.handleKeyUp}
onResize={this.handleResize}
/>
}
Какой метод называет этот метод.
handleKeyUp = (event) => {
if (keycode(event) === 'esc') {
this.requestClose(false);
}
};
Однако вы можете погрузиться в в node_modules/Материально-щ/Dialog/dialog.js и удалить этот код или изменить его. Удаление этой строки предотвратит ее закрытие на esc, но будет учитываться для всех диалогов. Возможно, после этого вы сможете реализовать прослушиватель событий keycode в своем собственном классе, который обрабатывает закрытие модального.
if ((0, _keycode2.default)(event) === 'esc') {
_this2.requestClose(false);
}
EDIT: возможное решение.
Я создал 2 компонента, компонент класса DialogContainer и функциональный компонент Dialog. Чтобы использовать это, вы должны npm install --save react-event-listener
.
Для этого вам все равно придется удалить вышеуказанный код из node_modules.
Когда открывается только одно диалоговое окно, он закрывает это диалоговое окно при нажатии esc. Если открываются два диалога, он сначала закрывает диалог2 и открывает диалог1.
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;
Большое спасибо за это! –