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

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