web-dev-qa-db-fra.com

Reactjs: rafraîchissement de la page sur la poignée `onClick` du bouton?

J'ai le bloc suivant dans ma render() (qui est un bouton Bootstrap: https://react-bootstrap.github.io/components.html# boutons-options ):

<Button type="simpleQuery" onClick={this.handleEntailmentRequest.bind(this)}>
   Query
</Button>

et la fonction suivante:

handleEntailmentRequest() {
    console.log("handle request ");
}

Chaque fois que je clique sur le bouton, je peux voir que la question "gérer la demande" apparaît dans le journal de la console, mais disparaît soudainement. Je crois comprendre que quelque chose provoque l'actualisation de la page. Des opinions sur lesquelles je me trompe?

javascriptreactjsreact-jsx
10
Daniel

L'action par défaut du bouton consiste à envoyer le formulaire.

Si vous n'en avez pas besoin - vous devez empêcher cela:

handleEntailmentRequest(e) {
    e.preventDefault();

    console.log("handle request ");
}

Références:

13
zerkms

La solution complète pour le problème du rechargement de page sera:

<Button type="simpleQuery" onClick={(e) => {this.handleEntailmentRequest(e)}}>
   Query
</Button>


handleEntailmentRequest(e){
    e.preventDefault();
    //do something...

}
8
Roman

Vous pouvez empêcher le comportement par défaut comme suggéré par zerkms ou

Ajoutez simplement type = "button" dans la balise button.

Par exemple: this.showSomething ('all')}> Tous

0
SureN