在我的主要组件中,我可以通过单击一个图标来打开模态。模态的内容是一个单独的组件,正在调用方法。如果方法调用成功,则我想关闭模式。但是我该怎么做呢?
主要成分
class Example extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div>
<Modal trigger={ <Icon name='tags' /> } >
<Modal.Header>
<div>
<Header floated='left'>Title</Header>
<Button floated='right'>A Button</Button>
</div>
</Modal.Header>
<Modal.Content>
<ModalContent />
</Modal.Content>
</Modal>
</div>
)
}
}
模态含量
class ModalContent extends Component {
constructor(props) {
super(props)
this.state = {}
}
handleClick() {
method.call(
{ param },
(error, result) => {
if (result) {
// Now close the modal
}
}
);
}
render() {
return (
<Button onClick={this.handleClick} content='Save' />
)
}
}
您应该onClose
向<Modal>
元素添加属性。请参见下面的示例:
<Modal
trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
open={this.state.modalOpen}
onClose={this.handleClose}
>
然后,您可以将onClose
功能添加到模态中的按钮。来自文档的完整示例:https : //react.semantic-ui.com/modules/modal#modal-example-受控
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句