ネストされたマテリアルとUIのダイアログからエスケープする

Question

ダイアログを開いて別のダイアログを開き、エスケープすると両方が閉じます。

エスケープする方法はありますか？一番上のダイアログを閉じるだけですか？

Answer 1

私はこれがいくつかの面倒なく可能であるとは思わない。ダイアログのレンダー機能では、このイベントリスナーがレンダリングされ、これを上書きすることができるプロペラはありません。

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

このメソッドを呼び出します。

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

source

ただしnode_modules /材料-UI /ダイアログ/ dialog.jsに飛び込むと、そのコードを削除したり、それを変更することができます。この行を削除すると、escでクローズすることはありませんが、すべてのダイアログでカウントされます。その後、モーダルの終了を処理する独自のクラスにkeycodeイベントリスナーを実装することができます。

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

EDIT：可能な解。

DialogContainerクラスコンポーネントとDialog機能コンポーネントの2つのコンポーネントを作成しました。これを使用するにはnpm install --save react-event-listenerが必要です。

これを行うには、上記のコードをnode_modulesから削除する必要があります。

ダイアログを1つだけ開くと、escをクリックするとそのダイアログが閉じます。 2つのダイアログが開かれている場合、最初にダイアログ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;