4
votes

Réagir: la fonction Button onClick s'exécute au chargement de la page mais vous ne cliquez pas dessus

J'utilise ButtonGroup et Button de ReactStrap. J'ai défini une fonction onClick lorsque vous cliquez sur l'un des boutons:

< ButtonGroup >
  <Button>Edit</Button>
  <Button onClick={console.log("Print some text")}>Print text</Button>
  <Button>Set as default</Button>
</ButtonGroup >

Mais lorsque je charge la page, voici ce que j'obtiens:

Avant même d'avoir cliqué sur le bouton. Et si je clique dessus, rien ne sort dans la console. Des idées?

javascript reactjs bootstrap-4 button react-bootstrap

2 commentaires

essayez onClick = {() => {console.log ("Print some text")}}

Double possible de l ' événement React onClick

3 Réponses :

9
votes

Onclick doit être une fonction. Vous venez de définir onlick comme résultat de console.log ("Imprimer du texte")

Essayez ceci

   <Button onClick={() => {console.log("Print some text")}}>Print text</Button>

0 commentaires

2
votes

Pour clarifier les choses

Sur tout déclencheur d'événement (onClick, onChange, etc.), vous devez spécifier une fonction à appeler lorsque l'événement se produit pas appeler la fonction tout de suite

Considérez cette fonction

ES5:

<Button onClick={callMe}>Print text</Button>

ES6:

<Button onClick={callMe()}>Print text</Button>

si vous souhaitez appeler cette fonction en cliquant sur le bouton, vous ne pouvez pas le faire

XXX

Cela appellera la fonction callMe lorsque le bouton est chargé une fois. Ce que vous devez faire pour que cela fonctionne, c'est

const callMe = () => {
  console.log("Some text");
}

Notez qu'il n'y a pas de parenthèses après le nom de la fonction qui indiquent que la fonction n'est pas encore appelée.

0 commentaires

3
votes

Le paramètre onClick est évalué comme un rappel, donc si vous transmettez quelque chose qui n'est pas une fonction, il est évalué et exécuté au moment de l'exécution.

Au lieu de cela, vous devez passer une fonction au paramètre onClick:

XXX

Soyez prudent avec les fonctions en ligne car elles sont évaluées à chaque fois que le rendu est exécuté, cela peut être plusieurs fois, chaque fonction est plus de mémoire utilisée par le navigateur.

Si vous avez une classe, vous pouvez utiliser une méthode de graisse de flèche:

/* ... */
handleOnClick = () => {
  console.log("Print some text");
}

render() {
  return (
    <ButtonGroup>
      <Button>Edit</Button>
      <Button onClick={this.handleOnClick}>Print text</Button>
      <Button>Set as default</Button>
    </ButtonGroup >
  );
}
/* ... */

2 commentaires

Excellente explication. Je voulais juste ajouter quelque chose: le premier extrait de code crée une nouvelle fonction de rappel à chaque fois que le composant effectue le rendu et qui force également le rendu de Button , le second utiliserait la même fonction de rappel, empêchant ainsi Button du re-rendu, mais il créera une nouvelle fonction handleOnClick par instance de composant, plutôt que de réutiliser une méthode prototype . Cela n'a peut-être pas d'importance dans la plupart des cas, mais si vous implémentez quelque chose comme une feuille de calcul ou une longue liste avec de nombreux gestionnaires d'événements et que certains de vos utilisateurs utilisent des ordinateurs moyens, ils peuvent remarquer la différence.

Voir medium.com/@charpeni/...