在ExtReact中没有调用Dialog

时间:2018-03-13 09:36:37

标签: javascript reactjs react-native extjs

所以,我想将Panel与Dialog结合起来,一旦我点击齿轮按钮(如图所示),我想要弹出一个对话框。但它就像它甚至没有调用函数showDialog()。代码中最重要的部分如下图所示。

enter image description here

- 需要的功能:

constructor(props){
        super(props);
        this.state = {
            showDialog: false,
            idOfPortletLocation: '',
            text: '',
            portletlocation: []
        };
    }

    showDialog(){
        this.setState({ showDialog: true });
    }

    onOk(){
        this.setState({ showDialog: false });
    }

    onCancel(){
        this.setState({ showDialog: false });
    }

-Render部分代码:

<Container layout="fit"> 
                <Panel 
                    ref={panel => this.panel = panel}
                    title= {this.state.text.title} 
                    tools={[ 
                        {type: 'minimize', handler: () => this.toolHandler("minimize", this.state.idOfPortletLocation)},
                        {type: 'maximize', handler: () => this.toolHandler("maximize", this.state.idOfPortletLocation)}, 
                        {type: 'close', handler: () => this.toolHandler("close", this.state.idOfPortletLocation)},
                        {type: 'gear', handler: () => this.showDialog}
                    ]}
                    bodyPadding={10}
                    ref="target"
                >
                    {this.state.text.description} 
                </Panel>
                 <Dialog
                    displayed={showDialog}
                    title="Dialog"
                    closable
                    maximizable
                    closeAction="hide"
                    maskTapHandler={this.onCancel}
                    bodyPadding="20"
                    maxWidth="200"
                    defaultFocus="#ok"
                    onHide={() => this.setState({ showDialog: false })}
                >
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.'
                    <Button text="Cancel" handler={this.onCancel}/>
                    <Button itemId="ok" text="OK" handler={this.onOk}/>
                </Dialog>
            </Container> 

1 个答案:

答案 0 :(得分:1)

你没有调用该函数,你应该:

{type: 'gear', handler: () => this.showDialog(); }