Comment fermer la modale de l'ui sémantique dans un autre composant react ?

Question

Dans mon composant principal, je peux ouvrir une modale en cliquant sur une icône. Le contenu de la modale est un composant séparé, qui appelle une méthode. Si l'appel de la méthode aboutit, je veux fermer la modale. Mais comment puis-je le faire ?

Composant principal

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>
        )
    }
}

Contenu modal

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' />
        )
    }
}

Answer 1

Vous devez ajouter un onClose à la propriété <Modal> élément. Voir l'exemple ci-dessous :

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

Vous pouvez alors ajouter onClose à un bouton de votre modale. Exemple complet dans la documentation : https://react.semantic-ui.com/modules/modal#modal-example-controlled

Answer 2

Sémantique-ui ont une propriété open . Il suffit de mettre true ou 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>
    )
  }
}

Answer 3

Passez un onSuccess comme un accessoire :

dans le parent :

 <ModalContent onSuccess={this.onModalSuccess}/>

dans le composant enfant :

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

De cette façon, vous conservez votre logique d'ouverture/fermeture dans le composant parent.