중첩 된 재질 - UI 대화 상자에서 벗어납니다.

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/재료 UI/대화/dialog.js 그 코드를 삭제하거나 변경합니다. 이 줄을 제거하면 esc에서 닫히지 않게되지만 모든 대화 상자에서 계산됩니다. 어쩌면 그때 당신은 모드의 닫는 것을 처리하는 당신 자신의 클래스에서 keycode event listener를 구현할 수 있습니다.

EDIT : 가능한 해결책.

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;