所以,我想将Panel与Dialog结合起来,一旦我点击齿轮按钮(如图所示),我想要弹出一个对话框。但它就像它甚至没有调用函数showDialog()。代码中最重要的部分如下图所示。
- 需要的功能:
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>
答案 0 :(得分:1)
你没有调用该函数,你应该:
{type: 'gear', handler: () => this.showDialog(); }