Jak korzystać ze zdarzenia onClick w komponencie React Link?

Używam komponentu Link z routera actjs i nie mogę uruchomić onClickevent. To jest kod:

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

Czy to jest sposób, aby to zrobić, czy inny sposób?

Przechodzisz hello()jako ciąg, hello()oznacza również hellonatychmiastowe wykonanie .

próbować

onClick={hello}

Powinieneś użyć tego:

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

Lub (jeśli metoda dotyczy hellotej klasy):

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

Aktualizacja: dla ES6 i najnowszych, jeśli chcesz powiązać niektóre parametry z metodą klikania, możesz użyć tego:

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

Ogólnie nie uważam, że jest to dobry wzorzec. Link uruchomi Twoje zdarzenie onClick, a następnie przejdzie do trasy, więc nawigacja do nowej trasy będzie niewielka. Lepszą strategią jest nawigacja do nowej trasy za pomocą właściwości „to”, tak jak to zostało zrobione, a w funkcji componentDidMount () nowego komponentu można uruchomić funkcję hello lub dowolną inną funkcję. Zapewni to ten sam wynik, ale ze znacznie płynniejszym przejściem między trasami.

Dla kontekstu zauważyłem to podczas aktualizacji mojego sklepu redux zdarzeniem onClick na Link, tak jak tutaj, i spowodowało to ~ 0,3 sekundy opóźnienia pustego białego ekranu przed zamontowaniem komponentu nowej trasy. Nie było zaangażowanego wywołania API, więc byłem zaskoczony, że opóźnienie było tak duże. Jeśli jednak rejestrujesz tylko konsolę „cześć”, opóźnienie może nie być zauważalne.