Wie verwende ich das onClick-Ereignis für die React Link-Komponente?

82

Ich verwende die Link-Komponente vom ReactJS-Router und kann das onClickevent nicht zum Laufen bringen. Dies ist der Code:

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

Ist das der Weg oder ein anderer Weg?

reactjs react-router react-redux bier hier
quelle

Antworten:

124

Sie übergeben hello()als Zeichenfolge, hello()bedeutet auch hellosofort ausführen .

Versuchen

onClick={hello}
CodinCat
quelle
31

Sie sollten dies verwenden:

<Link to={this.props.myroute} onClick={hello}>Here</Link>

Oder (wenn die Methode helloin dieser Klasse liegt):

<Link to={this.props.myroute} onClick={this.hello}>Here</Link>

Update: Für ES6 und die neueste Version können Sie Folgendes verwenden, wenn Sie einen Parameter mit der Klickmethode binden möchten:

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>
Vitaliy Andrusishyn
quelle
4
Oder besserthis.hello.bind(this)
webNeat
4
^ Sie sollten Aktionen im Konstruktor eigentlich immer binden, da die Bindung der Art und Weise, wie Sie sie haben, zu Leistungsproblemen führen kann.
Nunchucks
Link "zu" ist erforderlich, aber oft brauche ich nur onClick (), momentan muss ich so etwas tun <Link to="" onClick={this.delete}>Delete</Link>. Ich wünsche "zu" ist hier optional.
Newman
2
@newman Warum würdest du Linkohne verwenden to? Wenn Sie es nicht brauchen, dann nur eine andere Komponente wie eine <button>mit der onClickMethode und Sie können loslegen;).
Guilherme Oderdenge
23

Ich glaube nicht, dass dies ein gutes Muster im Allgemeinen ist. Link führt Ihr onClick-Ereignis aus und navigiert dann zur Route, sodass die Navigation zur neuen Route geringfügig verzögert wird. Eine bessere Strategie besteht darin, wie zuvor mit der 'to'-Requisite zur neuen Route zu navigieren. In der componentDidMount () -Funktion der neuen Komponente können Sie Ihre Hallo-Funktion oder eine andere Funktion auslösen. Sie erhalten das gleiche Ergebnis, jedoch mit einem viel reibungsloseren Übergang zwischen den Routen.

Für den Kontext habe ich dies beim Aktualisieren meines Redux-Speichers mit einem onClick-Ereignis auf Link bemerkt, wie Sie es hier haben, und es hat eine Verzögerung von ~ 0,3 Sekunden auf dem weißen Bildschirm verursacht, bevor die Komponente der neuen Route bereitgestellt wurde. Es war kein API-Anruf beteiligt, daher war ich überrascht, dass die Verzögerung so groß war. Wenn Sie jedoch nur die Konsole protokollieren, ist die Verzögerung möglicherweise nicht spürbar.

Nunchakus
quelle
Ich habe eine Rückruf-URL in meiner aktuellen Komponente, die ich in einem Cookie speichere, onClickbevor ich zu einer neuen Route übergehe. Ich werde diese Rückruf-URL in der nächsten Komponente nicht erhalten, daher muss ich dies vor dem Übergang selbst tun. Hast du eine Alternative dazu? PS: Die Rückruf-URL sollte auch nach der Aktualisierung verfügbar sein, damit sie im Geschäft gespeichert werden kann.
Parth Mistry
1
Wenn Sie die Reaktionsnavigation verwenden: Ich würde sagen, verwenden Sie keinen Link, sondern nur TouchableOpacity oder TouchableWithoutFeedback. In Ihrer onPress-Funktion können Sie navigieren und Ihre URL als onPress={() => { this.props.navigation.navigate('NameOfNextScreen', { callbackUrl: 'http://.callbackUrl.com', });Navigationsparameter übergeben. Wenn Sie die Reaktionsnavigation I nicht verwenden Ich würde nur Link's onClick verwenden und mir keine Sorgen über das leichte Leistungsproblem machen. Es wird wahrscheinlich nicht auffallen.
Nunchucks
Guter Rat! Vielen Dank!
aspiringsoftwaredev