React onClick - passer l'événement avec un paramètre

Question

Sans paramètre

function clickMe(e){
  //e is the event
}

<button onClick={this.clickMe}></button>

Avec paramètre

function clickMe(parameter){
  //how to get the "e" ?
}
<button onClick={() => this.clickMe(someparameter)}></button>

Je veux obtenir le event . Comment puis-je l'obtenir ?

Answer 1

Essayez ça :

<button 
   onClick={(e) => {
      this.clickMe(e, someParameter);
   }}
>
Click Me!
</button>

Et dans votre fonction :

function clickMe(event, someParameter){
     //do with event
}

Answer 2

Avec l'ES6, vous pouvez faire de manière plus courte comme ceci :

const clickMe = (parameter) => (event) => {
    // Do something
}

Et utilisez-la :

<button onClick={clickMe(someParameter)} />

Answer 3

Solution 1

function clickMe(parameter, event){
}

<button onClick={(event) => {this.clickMe(someparameter, event)}></button>

Solution 2 L'utilisation de la fonction bind est considérée comme meilleure que celle de la fonction arrow, dans la solution 1. Notez que le paramètre de l'événement doit être le dernier paramètre de la fonction du gestionnaire.

function clickMe(parameter, event){
}

<button onClick={this.clickMe.bind(this, someParameter)}></button>

Answer 4

Currying avec un exemple ES6 :

const clickHandler = param => event => {
  console.log(param); // your parameter
  console.log(event.type); // event type, e.g.: click, etc.
};

Notre bouton, qui fait basculer le gestionnaire :

<button onClick={(e) => clickHandler(1)(e)}>Click me!</button>

Si vous voulez appeler cette expression de fonction sans objet d'événement, vous l'appelez de cette façon :

clickHandler(1)();

De plus, étant donné que react utilise des événements synthétiques (une enveloppe pour les événements natifs), il y a une fonction regroupement d'événements ce qui signifie que, si vous voulez utiliser votre event de manière asynchrone, vous devrez alors utiliser la fonction event.persist() :

const clickHandler = param => event => {
  event.persist();
  console.log(event.target);
  setTimeout(() => console.log(event.target), 1000); // won't be null, otherwise if you haven't used event.persist() it would be null.
};

Voici un exemple concret : https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark

Answer 5

Pour résoudre complètement le problème de la création d'une nouvelle callback, utilisez la fonction data-* en HTML5 est la meilleure solution, selon moi. Car en fin de compte, même si vous extrayez un sous-composant pour passer les paramètres, cela crée toujours de nouvelles fonctions.

Par exemple,

const handleBtnClick = e => {
  const { id } = JSON.parse(e.target.dataset.onclickparam);
  // ...
};

<button onClick={handleBtnClick} data-onclickparam={JSON.stringify({ id: 0 })}>

Voir https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes pour avoir utilisé data-* attributs.