如何在另一个react组件中关闭语义ui模态?

用户名

在我的主要组件中,我可以通过单击一个图标来打开模态。模态的内容是一个单独的组件,正在调用方法。如果方法调用成功,则我想关闭模式。但是我该怎么做呢?

主要成分

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' />
        )
    }
}
德维达斯·卡兹瑙斯卡斯(Deividas Karzinauskas)

您应该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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React的Material-UI中关闭另一个组件中的对话框?

模态组件-如何包含和打开/关闭另一个组件

如何在React中让一个组件“位于另一个组件之下”?

如何在React中从另一个组件设置一个组件的状态

如何在 React 中从另一个组件重新渲染一个组件?

打开另一个模态时如何关闭另一个模态?

如何从React-Native中的另一个组件打开/关闭Drawer

如何在React中的另一个组件中添加组件?

React – 如何在另一个已安装的组件中渲染附加组件?

如何在REACT中从另一个同级或导入的组件更新同级组件的状态

一个React组件如何在另一个React组件中调用方法?

如何从另一个React组件关闭一个抽屉?

过渡到角度ui路由器上的另一个模态后如何关闭模态

如何在React Native中从另一个功能组件更改一个功能组件的状态?

如何在另一个中使用语义 ui 添加 div?

如何在React组件中的另一个函数中访问useEffect的异步数据

在ReactJS中,如何在另一个组件中渲染一个组件?

德尔菲。如何在调用另一个模态表单后立即关闭模态表单

如何在React的另一个组件中呈现搜索结果?

如何在另一个文件中获取组件的状态 react native

如何在React Native中导航到类组件中的另一个屏幕

如何在React.js中获取另一个组件的元素?

我如何在React Native中从另一个组件调用函数?

如何从钩子中的另一个组件打开模态?

如何在离子中的另一个组件中使用一个组件?

另一个组件如何从react / redux中的另一个组件动作中监听?

如何在React.js中从一个组件(子组件)到另一个组件(父组件)获取值?

如何在另一个组件的render方法内部渲染存储在数组中的React组件

如何在React.js中从另一个组件调用不同组件的ComponentDidMount()