Sencha ExtReact嵌套对话框不可访问

Question

详细信息:如果你看了视频，你能准确地看到问题，第一个对话框工作正常，但不是嵌套对话框，由于某些原因无法访问，任何帮助将是非常感谢的。

显示问题的视频

版本信息：

节点--版本12.16.1 npm - 6.13.4版 “反应”："^16.13.0“ "_from"：“@sencha/ext-react现代@^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 NestedDialogs extends Component {

    state = {
        showGrandfatherDialog: false
    }

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

    destroyGrandfatherDialog = () => {
        //debugger;
        this.setState({ showGrandfatherDialog: false });
    }

    render() {
        const { showGrandfatherDialog } = this.state;

        return (
            <Container
                viewport={true}
                layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
            >
                <Button text="Show Grandfather Dialog" handler={this.showGrandfatherDialog} ui="action raised" />

                {showGrandfatherDialog === true && 
                    <GrandfatherDialog
                        displayed={showGrandfatherDialog}
                        destroy={this.destroyGrandfatherDialog}
                    >
                    </GrandfatherDialog>
                }

            </Container>
        )
    }
}

class GrandfatherDialog extends Component {

    state = {
        showFatherDialog: false
    }

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

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

    render() {
        const { showFatherDialog } = this.state;
        return (
            <Dialog
                displayed={this.props.displayed}
                title="Grandfather Dialog"
                closable="true"
                width="600"
                height="600"
                layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
                onDestroy={this.props.destroy}
            >
                <Button text="Show Father Dialog" handler={this.showFatherDialog} ui="action raised" />
                    {showFatherDialog === true &&
                        <FatherDialog
                            displayed={showFatherDialog}
                            destroy={this.destroyFatherDialog}
                        >
                        </FatherDialog>
                    }
            </Dialog>
        );
    }
}

class FatherDialog extends Component {

    render() {
        return (
            <Dialog
                displayed={this.props.displayed}
                title="Father Dialog"
                closable="true"
                width="400"
                height="400"
                onDestroy={this.props.destroy}
            >
            </Dialog>
        );
    }
}

Answer 1

您可以为组件zIndex设置Dialog。

小提琴

但在这种情况下，面罩不能正常工作。我认为这是因为Dialog不适合多层使用。这个问题在经典工具包中用help Ext.ZIndexManager解决。现代工具箱里没有那个经理吗