Ich möchte die Eigenschaften des onClick-Ereigniswerts lesen. Aber wenn ich darauf klicke, sehe ich so etwas auf der Konsole:
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target
Mein Code funktioniert korrekt. Wenn ich laufe {column}
, kann ich es im onClick-Ereignis sehen, aber nicht bekommen.
Mein Code:
var HeaderRows = React.createClass({
handleSort: function(value) {
console.log(value);
},
render: function () {
var that = this;
return(
<tr>
{this.props.defaultColumns.map(function (column) {
return (
<th value={column} onClick={that.handleSort} >{column}</th>
);
})}
{this.props.externalColumns.map(function (column) {
// Multi dimension array - 0 is column name
var externalColumnName = column[0];
return ( <th>{externalColumnName}</th>);
})}
</tr>
);
}
});
Wie kann ich onClick
in React js einen Wert an das Ereignis übergeben?
javascript
reactjs
user1924375
quelle
quelle
Antworten:
Einfacher Weg
Verwenden Sie eine Pfeilfunktion:
Dadurch wird eine neue Funktion erstellt, die aufgerufen wird
handleSort
mit den richtigen Parametern aufruft.Besserer Weg
Extrahieren Sie es in eine Unterkomponente. Das Problem bei der Verwendung einer Pfeilfunktion im Renderaufruf besteht darin, dass jedes Mal eine neue Funktion erstellt wird, was zu unnötigen erneuten Rendern führt.
Wenn Sie eine Unterkomponente erstellen, können Sie den Handler übergeben und Requisiten als Argumente verwenden, die dann nur dann neu gerendert werden, wenn sich die Requisiten ändern (da sich die Handlerreferenz jetzt nie ändert):
Unterkomponente
Hauptbestandteil
Alter einfacher Weg (ES5)
Verwenden
.bind
Sie diese Option , um den gewünschten Parameter zu übergeben:quelle
<a>
Tag verwenden, an dem Sie das Ereignis bestehen müssen, um es zu verwendenpreventDefault()
bind
.Hier gibt es nette Antworten, und ich stimme @Austin Greco zu (die zweite Option mit separaten Komponenten).
Es gibt eine andere Art, die ich mag, Curry .
Sie können eine Funktion erstellen, die einen Parameter (Ihren Parameter) akzeptiert und eine andere Funktion zurückgibt, die einen anderen Parameter akzeptiert (in diesem Fall das Klickereignis). dann können Sie damit machen, was immer Sie wollen.
ES5:
ES6:
Und Sie werden es so verwenden:
Hier ist ein vollständiges Beispiel für eine solche Verwendung:
Code-Snippet anzeigen
Beachten Sie, dass dieser Ansatz nicht die Erstellung einer neuen Instanz bei jedem Rendering löst.
Ich mag diesen Ansatz gegenüber den anderen Inline-Handlern, da dieser meiner Meinung nach prägnanter und lesbarer ist.
Bearbeiten:
Wie in den Kommentaren unten vorgeschlagen, können Sie das Ergebnis der Funktion zwischenspeichern / auswendig lernen.
Hier ist eine naive Implementierung:
Code-Snippet anzeigen
quelle
handleChange = param => cache[param] || (e => { // the function body })
Heutzutage könnten wir mit ES6 eine aktualisierte Antwort verwenden.
Grundsätzlich
onClick
funktioniert (für alle, die es nicht wissen), da erwartet wird, dass eine Funktion an sie übergeben wird,bind
weil es eine Kopie einer Funktion erstellt. Stattdessen können wir einen Pfeilfunktionsausdruck übergeben, der einfach die gewünschte Funktion aufruft und beibehältthis
. Sie sollten dierender
Methode niemals in React binden müssen , aber wenn Sie aus irgendeinem Grundthis
eine Ihrer Komponentenmethoden verlieren :quelle
render()
da es von React aufgerufen wird. Wenn überhaupt, müssen Siebind
die Ereignishandler verwenden, und zwar nur, wenn Sie keine Pfeile verwenden.props
den Konstruktor zu übergebensuper()
oderthis.props
undefiniert zu sein, was verwirrend werden kann.foo = () => {...}
und dann beim Rendern<button onClick={this.foo}...
den einzigen Grund angeben, eine Pfeilfunktion einzuschließen, wenn Sie babel auf diese Weise verwenden, IMO, Dies ist der Fall, wenn Sie eine Variable erfassen möchten, die nur im Bereich der render () -Methode vorhanden ist (Ereignisse können einfach weitergegeben werden und gelten nicht).[[h / t an @ E.Sundin für die Verknüpfung in einem Kommentar]
Die Top-Antwort (anonyme Funktionen oder Bindung) funktioniert, ist jedoch nicht die leistungsstärkste, da für jede vom. Generierte Instanz eine Kopie des Ereignishandlers erstellt wird
map()
Funktion .Dies ist eine Erklärung für die optimale Vorgehensweise mit dem ESLint-Plugin-React :
quelle
this.state
, können Sie sie im Allgemeinen sicher gegen eine SFC austauschen.Dies ist mein Ansatz, nicht sicher, wie schlimm es ist, bitte kommentieren
Im anklickbaren Element
und dann
quelle
encodeURIComponent(JSON.stringify(myObj))
, um es zu analysierenJSON.parse(decodeURIComponent(myObj))
. Bei Funktionen bin ich mir ziemlich sicher, dass dies ohne eval oder neue Funktion () nicht funktioniert. Beides sollte vermieden werden. Aus diesen Gründen verwende ich keine Datenattribute, um Daten in React / JS zu übergeben.Dieses Beispiel unterscheidet sich möglicherweise kaum von Ihrem. Aber ich kann Ihnen versichern, dass dies die beste Lösung für dieses Problem ist. Ich habe tagelang nach einer Lösung gesucht, die keine Leistungsprobleme aufweist. und kam schließlich mit diesem.
AKTUALISIEREN
falls Sie sich mit Objekten befassen möchten, die die Parameter sein sollen. Sie können
JSON.stringify(object)
es in eine Zeichenfolge konvertieren und dem Datensatz hinzufügen.quelle
quelle
Eine weitere Option, an der
.bind
ES6 nicht beteiligt ist, besteht darin, eine untergeordnete Komponente mit einem Handler zu verwenden, um den übergeordneten Handler mit den erforderlichen Requisiten aufzurufen. Hier ist ein Beispiel (und ein Link zum Arbeitsbeispiel ist unten):Die Grundidee besteht darin, dass die übergeordnete Komponente die
onClick
Funktion an eine untergeordnete Komponente übergibt. Die untergeordnete Komponente ruft dieonClick
Funktion auf und kann auf alleprops
übergebenen Komponenten (und dieevent
) zugreifen , sodass Sie einen beliebigenevent
Wert oder andere Requisiten innerhalb der übergeordnetenonClick
Funktion verwenden können.Hier ist eine CodePen-Demo, die diese Methode in Aktion zeigt.
quelle
Mir ist klar, dass dies für die Party ziemlich spät ist, aber ich denke, eine viel einfachere Lösung könnte viele Anwendungsfälle befriedigen:
Ich nehme an, Sie könnten auch eine verwenden
data-
Attribut verwenden.Einfach, semantisch.
quelle
Erstellen Sie einfach eine solche Funktion
und nennen Sie es an der Stelle, die Sie brauchen
<Icon onClick = {() => {methodName (theParamsYouwantToPass); }} />
quelle
Versuchen Sie alternativ, die Frage von OP zu beantworten, einschließlich der Aufrufe von e.preventDefault ():
Gerenderter Link ( ES6 )
Komponentenfunktion
quelle
Sie können es einfach tun, wenn Sie verwenden
ES6
.quelle
Implementieren von show total count von einem Objekt durch Übergeben von count als Parameter von Haupt- an Unterkomponenten, wie unten beschrieben.
Hier ist MainComponent.js
Und hier ist
SubComp.js
Wenn Sie versuchen, oben zu implementieren, erhalten Sie ein genaues Szenario, wie Passparameter in Reactjs auf einer beliebigen DOM-Methode funktionieren.
quelle
Ich habe eine Wrapper-Komponente geschrieben, die für diesen Zweck wiederverwendet werden kann und auf den hier akzeptierten Antworten aufbaut. Wenn Sie jedoch nur eine Zeichenfolge übergeben müssen, fügen Sie einfach ein Datenattribut hinzu und lesen Sie es aus e.target.dataset (wie einige andere vorgeschlagen haben). Standardmäßig bindet mein Wrapper an alle Requisiten, die eine Funktion sind, und beginnt mit 'on'. Die Daten-Requisiten werden nach allen anderen Ereignisargumenten automatisch an den Aufrufer zurückgegeben. Obwohl ich es nicht auf Leistung getestet habe, haben Sie die Möglichkeit, die Klasse nicht selbst zu erstellen, und es kann folgendermaßen verwendet werden:
oder für Komponenten und Funktionen
oder wenn Sie es vorziehen
erklären, dass außerhalb Ihres Containers (in der Nähe Ihrer Importe)
Hier ist die Verwendung in einem Container:
Hier ist der Wrapper-Code 'withData.js:
quelle
Ich habe unter 3 Vorschläge dazu auf JSX onClick Events -
Tatsächlich müssen wir in unserem Code keine .bind () - oder Arrow-Funktion verwenden. Sie können einfach in Ihrem Code verwenden.
Sie können das Ereignis onClick auch von th (oder ul) nach tr (oder li) verschieben, um die Leistung zu verbessern. Grundsätzlich haben Sie n Anzahl von "Event Listenern" für Ihr n li Element.
// Und Sie können
item.id
in deronItemClick
Methode wie unten gezeigt zugreifen :Ich stimme dem oben erwähnten Ansatz zum Erstellen einer separaten Reaktionskomponente für ListItem und List zu. Dieser Make-Code sieht jedoch gut aus, wenn Sie 1000 Li haben, werden 1000 Event Listener erstellt. Bitte stellen Sie sicher, dass Sie nicht viel Ereignis-Listener haben sollten.
quelle
Ich habe der Methode auf zwei Arten Code für die Übergabe des Ereigniswerts onclick hinzugefügt. 1. Verwenden der Bindemethode 2. Verwenden der Pfeilmethode (=>). Siehe die Methoden handleort1 und handleort
quelle
Unten sehen Sie das Beispiel, das den Wert für das onClick-Ereignis übergibt.
Ich habe die es6-Syntax verwendet. Denken Sie daran, dass die Pfeilfunktion in der Klassenkomponente nicht automatisch bindet, daher wird sie im Konstruktor explizit gebunden.
quelle
Ich denke, Sie müssen die Methode an die Klasseninstanz von React binden. Es ist sicherer, einen Konstruktor zu verwenden, um alle Methoden in React zu binden. In Ihrem Fall, wenn Sie den Parameter an die Methode übergeben, wird der erste Parameter verwendet, um den 'this'-Kontext der Methode zu binden, sodass Sie nicht auf den Wert innerhalb der Methode zugreifen können.
quelle
quelle
Es ist ein sehr einfacher Weg.
quelle
quelle
Ich komme aus dem Nichts zu dieser Frage, aber ich denke, das
.bind
wird den Trick machen. Hier finden Sie den Beispielcode.quelle
Verwenden der Pfeilfunktion:
Sie müssen Stufe 2 installieren:
npm install babel-preset-stage-2:
quelle
Es gibt drei Möglichkeiten, damit umzugehen: -
Binden Sie die Methode im Konstruktor wie folgt: -
Verwenden Sie die Pfeilfunktion beim Erstellen als: -
Der dritte Weg ist folgender:
quelle
Sie können Ihren Code folgendermaßen verwenden:
Hier ist e für ein Ereignisobjekt, wenn Sie Ereignismethoden wie
preventDefault()
in Ihrer Handle-Funktion verwenden oder einen Zielwert oder einen Namen wie erhalten möchtene.target.name
.quelle
Ich fand die Lösung, param als Attribut eines Tags zu übergeben, ziemlich vernünftig.
Es hat jedoch Einschränkungen:
Deshalb habe ich mir diese Bibliothek ausgedacht : react-event-param
Es:
Anwendungsbeispiel:
quelle
Es gab viele Überlegungen zur Leistung, alle im luftleeren Raum.
Das Problem mit diesen Handlern ist, dass Sie sie curry müssen, um das Argument, das Sie nicht benennen können, in die Requisiten aufzunehmen.
Dies bedeutet, dass die Komponente für jedes anklickbare Element einen Handler benötigt. Lassen Sie uns zustimmen, dass dies für einige Schaltflächen kein Problem ist, oder?
Das Problem tritt auf, wenn Sie Tabellendaten mit Dutzenden von Spalten und Tausenden von Zeilen verarbeiten. Dort bemerken Sie die Auswirkungen der Erstellung so vieler Handler.
Tatsache ist, ich brauche nur einen.
Ich setze den Handler auf Tabellenebene (oder UL oder OL ...), und wenn der Klick erfolgt, kann ich anhand der seitdem im Ereignisobjekt verfügbaren Daten feststellen, welche Zelle angeklickt wurde:
Ich verwende die Tagname-Felder, um zu überprüfen, ob der Klick in einem gültigen Element stattgefunden hat, z. B. um Klicks in den Fußzeilen zu ignorieren.
Der rowIndex und der cellIndex geben die genaue Position der angeklickten Zelle an.
Textinhalt ist der Text der angeklickten Zelle.
Auf diese Weise muss ich die Daten der Zelle nicht an den Handler übergeben, sondern kann sie selbst bedienen.
Wenn ich mehr Daten benötige, Daten, die nicht angezeigt werden sollen, kann ich das Dataset-Attribut oder versteckte Elemente verwenden.
Mit einer einfachen DOM-Navigation ist alles zur Hand.
Dies wird seit jeher in HTML verwendet, da PCs viel einfacher zu blockieren waren.
quelle
Es gibt verschiedene Möglichkeiten, Parameter in Ereignishandlern zu übergeben. Einige folgen den folgenden.
Mit einer Pfeilfunktion können Sie einen Ereignishandler umschließen und Parameter übergeben:
Das obige Beispiel entspricht dem Aufruf
.bind
oder Sie können bind explizit aufrufen.Abgesehen von diesen beiden Ansätzen können Sie auch Argumente an eine Funktion übergeben, die als Curry-Funktion definiert ist.
quelle
Verwenden Sie einen Verschluss , um eine saubere Lösung zu erhalten:
<th onClick={this.handleSort(column)} >{column}</th>
handleSort Funktion gibt eine Funktion , die den Wert Spalte bereits festgelegt.
Die anonyme Funktion wird mit dem richtigen Wert aufgerufen, wenn der Benutzer auf das th klickt.
Beispiel: https://stackblitz.com/edit/react-pass-parameters-example
quelle
Einfache Änderung ist erforderlich:
Verwenden
<th value={column} onClick={that.handleSort} >{column}</th>
anstatt
<th value={column} onClick={that.handleSort} >{column}</th>
quelle