如何关闭另一个反应组件中的语义ui模态？ [英] How to close semantic ui modal in another react component?

问题描述

在我的主要组件中，我可以通过单击图标打开模态。模态的内容是一个单独的组件，它调用一个方法。
如果方法调用成功，我想关闭模态。但是我该怎么办呢？

In my main component I can open a modal by clicking on an icon. The content of the modal is a separate component, which is calling a method. If the method call is successful, I want to close the modal. But how can I do this?

主要组件

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> 元素。请参阅下面的示例：

You should add an onClose property to <Modal> element. See example below:

<Modal
    trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
    open={this.state.modalOpen}
    onClose={this.handleClose}
  >

然后你可以将 onClose 函数添加到a模态中的按钮。文档中的完整示例：
https：// react。 semantic-ui.com/modules/modal#modal-example-controlled

Then you can add onClose function to a button in your modal. Full example from the docs: https://react.semantic-ui.com/modules/modal#modal-example-controlled

这篇关于如何关闭另一个反应组件中的语义ui模态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！