OnClick reagieren - Ereignis mit Parameter übergeben

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>

Ich möchte das bekommen event. Wie kann ich es bekommen?

Versuche dies:

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

Und in Ihrer Funktion:

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

Mit dem ES6 können Sie dies auf kürzere Weise tun:

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

Und benutze es:

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

Lösung 1

function clickMe(parameter, event){
}

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

Lösung 2 Die Verwendung der Bindungsfunktion wird in Lösung 1 als besser als die Pfeilfunktion angesehen. Beachten Sie, dass der Ereignisparameter der letzte Parameter in der Handlerfunktion sein sollte

function clickMe(parameter, event){
}

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

Um das Problem beim Erstellen eines neuen Rückrufs vollständig zu lösen, ist die Verwendung der data-*Attribute in HTML5 die beste Lösung, IMO. Selbst wenn Sie am Ende des Tages eine Unterkomponente extrahieren, um die Parameter zu übergeben, werden dennoch neue Funktionen erstellt.

Zum Beispiel,

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

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

Informationen zur Verwendung von data-*Attributen finden Sie unter https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes .

Currying mit ES6 Beispiel:

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

Unser Button, der den Handler umschaltet:

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

Wenn Sie diesen Funktionsausdruck ohne Ereignisobjekt aufrufen möchten, rufen Sie ihn folgendermaßen auf:

clickHandler(1)();

Da React synthetische Ereignisse verwendet (ein Wrapper für native Ereignisse), gibt es eine Ereignispooling-Funktion. Wenn Sie Ihr eventObjekt also asynchron verwenden möchten , müssen Sie Folgendes verwenden 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.
};

Hier ist ein Live-Beispiel: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark