Fermer Modal dans l'interface utilisateur Réagir sur le bouton Annuler

Question

Je suis https://react.semantic-ui.com/modules/modal pour créer un formulaire modal.

Je souhaite fermer le modal en cliquant sur le bouton Cancel. Je suis limité à ne pas utiliser la méthode abrégée suggérée dans le lien ci-dessus. Comment dois-je écrire la fonction handleClose() pour fermer le formulaire Modal?

handleClose =() => { 
    console.log("close") 
} 

render(){ 
    return(
     <Modal trigger={<Button>Upload</Button>}closeIcon> 
     <Modal.Content> 
     <p>Please upload a valid file.</p> 
     <Form.Input 
      name="upload" 
      label="" 
      type="file" 
      onChange={e => 
      this.setState({file_data : e.target.files[0]})} 
     > 
     </Form.Input> 

     </Modal.Content> 
     <Modal.Actions> 
     <Button onClick = {this.handleClose}>Cancel 
     </Button> 
     <Button positive onClick = {this.handleUpload}>Upload 
     </Button> 
     </Modal.Actions> 
    </Modal> 
    ); 
    } 

Answer 1

En fait, je l'ai résolu. J'initialise une variable dans l'état model_open : false puis déclare deux fonctions pour cela.

handleOpen =() => { 
    this.setState({ model_open: true }) 
} 

handleClose =() => { 
    this.setState({ model_open: false }) 
} 

Ensuite, je viens d'appeler ces méthodes en fonction du cas d'utilisation.

render(){ 
    return(
    <Modal 
    trigger={<Button onClick={this.handleOpen}>Upload</Button>} 
    open={this.state.model_open} 
    onClose={this.handleClose} 
    closeIcon> 
    <Modal.Content> 
     <p>Please upload a valid file.</p> 
     <Form.Input 
     name="upload" 
     label="" 
     type="file" 
     onChange={e => 
      this.setState({file_data : e.target.files[0]})} 
     > 
     </Form.Input> 

    </Modal.Content> 
    <Modal.Actions> 
     <Button onClick = {this.handleClose}>Cancel 
     </Button> 
     <Button positive onClick = {this.handleUpload}>Upload 
     </Button> 
    </Modal.Actions> 
    </Modal> 
); 
}