web-dev-qa-db-ja.com

React LinkコンポーネントでonClickイベントを使用する方法は？

ReactjsルーターのLinkコンポーネントを使用していますが、onClickeventが機能しません。これはコードです：

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

これはそれを行う方法ですか、それとも別の方法ですか？

reactjsreact-routerreact-redux
43
bier hier

hello()を文字列として渡します。また、hello()はhelloをすぐに実行することを意味します。

試してみる

onClick={hello}
82
CodinCat

これを使用する必要があります：

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

または（メソッドhelloがこのクラスにある場合）：

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

更新： ES6および最新の場合、クリックメソッドでパラメーターをバインドする場合、これを使用できます。

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

これは一般的に使用するのに適したパターンではないと思います。リンクはonClickイベントを実行してからルートにナビゲートするため、新しいルートへのナビゲートには若干の遅延が発生します。よりよい戦略は、「to」プロップを使用して新しいルートにナビゲートすることです。新しいコンポーネントのcomponentDidMount（）関数では、hello関数またはその他の関数を起動できます。同じ結果が得られますが、ルート間の移行がはるかにスムーズになります。

コンテキストでは、ここにあるようなリンク上のonClickイベントでreduxストアを更新しているときにこれに気付き、新しいルートのコンポーネントをマウントする前に〜.3秒の空白の白い画面の遅延が発生しました。 API呼び出しは関係していなかったため、遅延が非常に大きかったことに驚きました。ただし、コンソールに「hello」と記録するだけの場合、遅延は目立たない可能性があります。

9
Nunchucks