Sencha ExtReact Как закрыть диалог нажатием Esc - PullRequest
Новая
       24

Sencha ExtReact Как закрыть диалог нажатием Esc

0 голосов
/ 01 марта 2020

Подробности: я хочу иметь возможность закрыть диалог после нажатия клавиши Es c, любая помощь будет принята с благодарностью.

Видео, показывающее проблему

Информация о версии:

узел - версия v12.16.1

npm - версия 6.13.4

"реагировать": "^ 16.13 .0 ",

" _ from ":" @ sencha / ext-реакции-modern @ ^ 7.2.0 "

Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще, что может помочь решение этой проблемы.

У меня есть код: 

import React, { Component } from 'react';
import { Container, Button } from '@sencha/ext-react-modern';
import { Dialog } from '@sencha/ext-react-modern';

export default class DialogExample extends Component {

    state = {
        showDialog: false
    }

    showDialog = () => {
        //debugger;
        this.setState({ showDialog: true });
    }

    destroyDialog = () => {
        //debugger;
        this.setState({ showDialog: false });
    }

    render() {
        const { showDialog } = this.state;
        return (
            <Container
                viewport={true}
                layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
            >
                <Button text="Show Dialog" handler={this.showDialog} ui="action raised" />
                {showDialog === true && 
                    <Dialog1
                        displayed={showDialog}
                        destroy={this.destroyDialog}
                    >
                    </Dialog1>
                }

            </Container>
        )
    }
}

class Dialog1 extends Component {
    render() {
        return (
            <Dialog
                displayed={this.props.displayed}
                title="Dialog"
                closable="true"
                width="600"
                height="600"
                layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
                onDestroy={this.props.destroy}
                html= 'I want the Dialog to close when Esc key is pressed.'
            >
            </Dialog>
        );
    }
}
...