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

IT技术 javascript reactjs semantic-ui semantic-ui-react
2021-05-06 11:22:56

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

主要成分

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' />
        )
    }
}
3个回答

您应该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-control

将onSuccess方法作为props传递：

在父级中：

 <ModalContent onSuccess={this.onModalSuccess}/>

在子组件中： 

handleClick() {
   method.call(
        { param },
        (error, result) => {
            if (result) {
                this.props.onSuccess()
            }
        }
    );
}

通过这种方式，您可以在父组件中保留打开/关闭逻辑。

语义-ui 有属性open。只需设置true或false

class Example extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
  }
  open = () => this.setState({ open: true })
  close = () => this.setState({ open: false })
  render() {
    return (
        <div>
            <Modal open={this.state.open} 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>
    )
  }
}
其它你可能感兴趣的问题
上一篇具有动态高度的 React Material-Ui 粘性表头 下一篇React - 使用 JavaScript 设置输入值不会触发“onChange”