web-dev-qa-db-fra.com

Comment fermer le modal sémantique ui dans un autre composant de réaction?

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

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' />
        )
    }
}
javascriptreactjssemantic-uisemantic-ui-react
6
user3142695

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

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

Ensuite, vous pouvez ajouter une fonction onClose à un bouton de votre modal. Exemple complet tiré de la documentation: https://react.semantic-ui.com/modules/modal#modal-example-controlled

4
Deividas Karzinauskas

sémantique-ui a la propriété open. Il suffit de définir 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>
    )
  }
}
1
Simonov Dmitry

Passez une méthode onSuccess comme 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 manière, vous conservez votre logique d'ouverture/fermeture dans le composant parent.

0
Anthony Ivol