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?
javascript
reactjs
events
dom-events
IMOBAMA
quelle
quelle
onClick={(e) => { this.clickMe(e, someparameter) }}
data-*
Attribute in HTML5 zu verwenden. Bitte sehen Sie meine Antwort unten für weitere Details.Mit dem ES6 können Sie dies auf kürzere Weise tun:
const clickMe = (parameter) => (event) => { // Do something }
Und benutze es:
quelle
onClick={(e) => clickMe(someParameter)(e)}
const clickMe = (parameter) => (event) => {...}
stattdessenconst clickMe = (parameter) => {...}
?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>
quelle
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 .quelle
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
event
Objekt also asynchron verwenden möchten , müssen Sie Folgendes verwendenevent.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
quelle
event.persist()
mit ,console.log(event)
aber ich brauche es nicht mitconsole.log(event.target)
?let event;
also ist es ein nicht definierte Fehler werfen würde nicht.