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

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 fichier event. Comment puis-je l'avoir?

Essaye ça:

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

Et dans votre fonction:

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

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

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

Et utilisez-le:

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

Solution 1

function clickMe(parameter, event){
}

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

Solution 2 L' utilisation de la fonction de liaison est considérée comme meilleure que celle de la fonction flèche dans la solution 1. Notez que le paramètre d'événement doit être le dernier paramètre de la fonction de gestionnaire

function clickMe(parameter, event){
}

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

Pour résoudre complètement le problème de création de nouveaux rappels, utiliser les data-*attributs en HTML5 est la meilleure solution IMO. Car en fin de compte, même si vous extrayez un sous-composant pour passer les paramètres, cela crée quand même 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 l'utilisation des data-*attributs.

Exemple de curry avec ES6:

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

Notre bouton, qui bascule le gestionnaire:

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

Si vous souhaitez appeler cette expression de fonction sans objet d'événement, vous l'appelez ainsi:

clickHandler(1)();

De plus, étant donné que react utilise des événements synthétiques (un wrapper pour les événements natifs), il existe un élément de regroupement d'événements , ce qui signifie que si vous souhaitez utiliser votre eventobjet de manière asynchrone, vous devez utiliser 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 en direct: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark