Estoy usando el componente Link del enrutador reactjs y no puedo hacer que onClickevent funcione. Este es el código:
<Link to={this.props.myroute} onClick='hello()'>Here</Link>¿Es esta la manera de hacerlo o de otra manera?
Está pasando hello() como una cadena, también hello() significa ejecutar hello inmediatamente.
tratar
onClick={hello}Deberías usar esto:
<Link to={this.props.myroute} onClick={hello}>Here</Link> O (si el método hello se encuentra en esta clase):
<Link to={this.props.myroute} onClick={this.hello}>Here</Link>Actualización: para ES6 y más reciente, 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>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 a la nueva ruta. Una mejor estrategia es navegar a la nueva ruta con el apoyo 'a' como lo ha hecho, y en la función componenteDidMount() del nuevo componente puede activar su función de saludo o cualquier otra función. Te dará el mismo resultado, pero con una transición mucho más suave entre rutas.
Por contexto, me di cuenta de esto mientras actualizaba mi tienda redux con un evento onClick en Link como el que tiene aquí, y causó un retraso de pantalla en blanco de ~.3 segundos antes de montar el componente de la nueva ruta. No hubo una llamada api involucrada, por lo que me sorprendió que la demora fuera tan grande. Sin embargo, si solo está registrando "hola" en la consola, es posible que el retraso no se note.