Réagir onClick passe - événement avec un paramètre

Sans Paramètre

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

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

Avec Le 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?

OriginalL'auteur IMOBAMA | 2017-03-04

  1. 66

    Essayer cette

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

    Et dans votre fonction

    function clickMe(event, someParameter){
     //do with event
}
    Cela m'a donné une eslint d'erreur (eslint.org/docs/rules/arrow-parens.html) Ce que j'ai fait a été envelopper les paramètres de la fonction entre parenthèses onClick={(e) => { this.clickMe(e, someparameter) }}
    Oui @kretzm Si nous ne donnons pas les accolades, il agit comme un retour d'expression quand elle est seule ligne d'autre, nous devons utiliser des accolades pour envelopper comme d'un corps de fonction.
    Je veux juste ajouter que ce n'est pas recommandé de syntaxe. À partir de la reactjs docs: Le problème avec cette syntaxe est qu'un rappel est créé chaque fois que le bouton qui rend. Dans la plupart des cas, c'est très bien. Toutefois, si ce rappel est passé comme un accessoire à la baisse des composants, ces composants pourrait faire un extra re-rendu. Nous recommandons généralement de liaison dans le constructeur, ou en utilisant le champs de la classe de la syntaxe, pour éviter ce genre de problème de performances. Plus d'infos reactjs.org
    Oui, vous avez raison. Mais si vous voulez le contexte de votre parent à l'intérieur de votre rappel, vous devez avoir différentes rappel sur chaque rendu. En fait c'est un compromis je pense.

    OriginalL'auteur Jyothi Babu Araja

  2. 1

    Solution 1 

    function clickMe(parameter, event){
}

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

    Solution 2
    À l'aide de la fonction de liaison est considérée comme meilleure que la flèche en fonction de moyen, 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>

    OriginalL'auteur Bence Dergez