Reagieren onClick - pass-Ereignis mit dem parameter

Ohne Parameter

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

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

Mit Parameter

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

Möchte ich, um die event. Wie kann ich es bekommen?

InformationsquelleAutor IMOBAMA | 2017-03-04
  1. 89

    Versuchen, diese

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

    Und in Ihrer Funktion

    function clickMe(event, someParameter){
     //do with event
}
    • Dieser hatte mir ein eslint-Fehler (eslint.org/docs/rules/arrow-parens.html), Was ich Tat, war wrap-Parameter für die Funktion in Klammern onClick={(e) => { this.clickMe(e, someparameter) }}
    • Ja @kretzm Wenn wir uns nicht Klammern, es wirkt wie eine Rückkehr Ausdruck, wenn es eine einzige Zeile, sonst müssen wir verwenden Sie Klammern, um wrap als Funktion Körper.
    • Ich möchte nur hinzufügen, dass es ist nicht empfehlenswert, syntax. Aus der reactjs docs: Das problem mit dieser syntax ist, dass ein anderes callback wird jedes mal erstellt, wenn die Taste macht. In den meisten Fällen ist dies in Ordnung. Allerdings, wenn diese callback übergeben wird, die als requisite, um den unteren Komponenten, diese Komponenten könnte einen extra re-rendering. Wir empfehlen generell die Bindung im Konstruktor oder mit Hilfe der Klasse Felder syntax, um zu vermeiden, diese Art von performance-problem. Mehr Infos unter reactjs.org
    • Ja, du hast Recht. Aber wenn Sie wollen, dass der Zusammenhang von Ihren Eltern in Ihrem Rückruf, benötigen Sie verschiedene callback auf jeden machen. Eigentlich ist es ein trade-off, denke ich.
    InformationsquelleAutor Jyothi Babu Araja
  2. 5

    Lösung 1 

    function clickMe(parameter, event){
}

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

    Lösung 2
    Die bind-Funktion ist besser angesehen, als der Pfeil Funktion Weg, in Lösung 1.
    Beachten Sie, dass der Ereignis-parameter muss der Letzte parameter in der handler-Funktion

    function clickMe(parameter, event){
}

<button onClick={this.clickMe.bind(this, someParameter)}></button>
    • +1 für den event-parameter ist das Letzte, was Lösung #2. Hat mich immer zu erkennen, was ich falsch mache, muss ich verpasst haben, der Grund irgendwo in der Dokumentation.
    InformationsquelleAutor Bence Dergez
  3. 2

    Mit dem ES6, die Sie tun können, in einer kürzeren Art und Weise, wie diese:

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

    Ans verwenden:

    <button onClick={clickMe(someParameter)} />
    InformationsquelleAutor Minh Kha
Schreibe einen Kommentar