¿Cómo usar el evento onClick en el componente react Link?

82

Estoy usando el componente Link del enrutador reactjs y no puedo hacer que funcione onClickevent. Este es el código:

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

¿Es esta la forma de hacerlo o de otra forma?

reactjs react-router react-redux bier hier
fuente

Respuestas:

124

Estás pasando hello()como una cadena, también hello()significa ejecutar helloinmediatamente.

tratar

onClick={hello}
CodinCat
fuente
31

Deberías usar esto:

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

O (si el método se helloencuentra en esta clase):

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

Actualización: para ES6 y la última, si desea vincular algún parámetro con el método de clic, puede usar esto:

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>
Vitaliy Andrusishyn
fuente
4
O mejorthis.hello.bind(this)
webNeat
4
^ En realidad, siempre debe vincular acciones en el constructor, ya que la vinculación de la forma en que lo ha hecho puede provocar problemas de rendimiento.
Nunchucks
Se requiere un enlace "a", pero muchas veces solo necesito onClick (), actualmente, tengo que hacer algo como <Link to="" onClick={this.delete}>Delete</Link>. Deseo "a" es opcional aquí.
Newman
2
@newman ¿Por qué usarías Linksin to? Si no lo necesita, solo use algún otro componente como un <button>con el onClickmétodo y estará listo;).
Guilherme Oderdenge
23

No creo que este sea un buen patrón para usar en general. Link ejecutará su evento onClick y luego navegará a la ruta, por lo que habrá un ligero retraso en la navegación hacia la nueva ruta. Una mejor estrategia es navegar a la nueva ruta con la opción 'to' como lo ha hecho, y en la función componentDidMount () del nuevo componente puede activar su función hello o cualquier otra función. Te dará el mismo resultado, pero con una transición mucho más suave entre rutas.

Para el contexto, noté esto mientras actualizaba mi tienda redux con un evento onClick en Link como el que tiene aquí, y causó un retraso de ~ .3 segundos en la pantalla en blanco antes de montar el componente de la nueva ruta. No hubo ninguna llamada de API involucrada, así que me sorprendió que el retraso fuera tan grande. Sin embargo, si solo está registrando la consola "hola", es posible que el retraso no se note.

Nunchucks
fuente
Tengo una URL de devolución de llamada en mi componente actual que estoy guardando en una cookie onClickantes de hacer la transición a la nueva ruta. No obtendré esa URL de devolución de llamada en el siguiente componente, así que necesito hacer eso antes de la transición. ¿Tienes alguna alternativa a eso? PD: La URL de devolución de llamada debe ser accesible incluso después de la actualización, por lo que puede guardarla en la tienda.
Parth Mistry
1
Si está usando react-navigation: Yo diría que no use Link, simplemente use TouchableOpacity o TouchableWithoutFeedback, luego en su función onPress puede navegar y pasar su url como un parámetro de navegación onPress={() => { this.props.navigation.navigate('NameOfNextScreen', { callbackUrl: 'http://.callbackUrl.com', });Si no está usando react-navigation I solo usaría Link's onClick y no se preocupe por el ligero problema de rendimiento. Probablemente no se notará.
Nunchucks
¡Buen consejo! ¡Gracias!
aspiringsoftwaredev