2016-08-05 1 views

ответ

0

Я не думаю, что это будет возможно без каких-либо хлопот. В функции визуализации диалога этот eventlistener визуализируется, и нет опоры, которая позволяет вам перезаписать это.

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

Какой метод называет этот метод.

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

source

Однако вы можете погрузиться в в 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; 
+0

Большое спасибо за это! –