Jak korzystać ze zdarzenia onClick w komponencie React Link?

84

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?

reactjs react-router react-redux bier hier
źródło

Odpowiedzi:

127

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

próbować

onClick={hello}
CodinCat
źródło
32

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>
Vitaliy Andrusishyn
źródło
4
Albo lepiejthis.hello.bind(this)
webNeat
4
^ Powinieneś zawsze wiązać akcje w konstruktorze, ponieważ wiązanie w sposób, w jaki masz, może prowadzić do problemów z wydajnością.
Nunchucks
1
Link „to” jest wymagany, ale często potrzebuję tylko onClick (), obecnie muszę zrobić coś takiego <Link to="" onClick={this.delete}>Delete</Link>. „Chcę” jest tutaj opcjonalne.
newman
2
@newman Dlaczego miałbyś używać Linkbez to? Jeśli tego nie potrzebujesz, to po prostu jakiś inny komponent, taki jak a <button>z onClickmetodą i jesteś gotowy;).
Guilherme Oderdenge
23

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.

Nunczako
źródło
W moim obecnym komponencie mam adres zwrotny, który zapisuję w pliku cookie onClickprzed przejściem na nową trasę. Nie otrzymam tego adresu URL wywołania zwrotnego w następnym komponencie, więc muszę to zrobić przed przejściem. Czy masz jakąś alternatywę? PS: URL wywołania zwrotnego powinien być dostępny nawet po odświeżeniu, aby można go było zapisać w sklepie.
Parth Mistry
1
Jeśli używasz nawigacji React-navigation: powiedziałbym, że nie używaj łącza, po prostu użyj TouchableOpacity lub TouchableWithoutFeedback, a następnie w funkcji onPress możesz nawigować i przekazywać swój adres URL jako parametr nawigacyjny onPress={() => { this.props.navigation.navigate('NameOfNextScreen', { callbackUrl: 'http://.callbackUrl.com', });Jeśli nie korzystasz z funkcji React-navigation I po prostu użyje onClick Link i nie martw się o drobny problem z wydajnością. Prawdopodobnie nie będzie to zauważalne.
Nunchucks
Dobra rada! Dzięki!
aspiringsoftwaredev