webentwicklung-frage-antwort-db.com.de

Verwendung des onClick-Ereignisses bei der Komponente "React Link"

Ich verwende die Link-Komponente des Reactjs-Routers und kann das onClickevent nicht zum Laufen bringen. Dies ist der Code:

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

Ist dies der Weg, um es zu tun, oder ein anderer Weg?

43
bier hier

Sie übergeben hello() als Zeichenfolge, auch hello() bedeutet, dass hello sofort ausgeführt wird.

versuchen

onClick={hello}
82
CodinCat

Sie sollten dies verwenden:

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

Oder (falls Methode hello in dieser Klasse liegt):

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

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

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>
15

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

Im Kontext habe ich dies bemerkt, als ich meinen Redux-Speicher mit einem onClick-Ereignis auf Link aktualisiert habe, wie Sie es hier getan haben, und es verursachte eine Verzögerung von ~ 0,3 Sekunden bei leerem weißen Bildschirm, bevor die Komponente der neuen Route geladen wurde. Es gab keinen API-Aufruf, daher war ich überrascht, dass die Verzögerung so groß war. Wenn Sie jedoch nur die Konsolenprotokollierung "Hallo" durchführen, ist die Verzögerung möglicherweise nicht erkennbar.

9
Nunchucks