React: Pasando funciones de enfoque a componentes secundarios utilizando refs.
En el constructor de mi componente padre (basado en clase), agrego una referencia para un campo de entrada utilizando:
this.usernameRef = React.createRef();
Esto funciona bien en el componente padre. Por ejemplo, lo siguiente funciona correctamente:
const username = this.usernameRef.current.value; // esto funciona
Estoy pasando la llamada .focus() a la referencia en un componente hijo de la siguiente manera:
<childcomponent onclick="{()" ==""> this.usernameRef.current.focus()}
/>
En mi componente hijo, se llama con un evento onClick:
<a href="#" onclick="{onClick}"></a>
Mientras la aplicación se está ejecutando, cuando hago clic en ese enlace, obtengo el siguiente error:
e.usernameRef.current.focus no es una función
¿Debería estar haciendo esto de manera diferente?
Por lo que vale, el componente hijo está basado en una función.
Gracias.
davy.ai
Parece que el problema podría estar en el contexto en el que se está llamando la función
onClick
. Dado que el componente hijo es basado en una función, no tiene un contexto dethis
como lo tendría un componente basado en una clase, por lo que no puede acceder a la propiedadthis.usernameRef
.Una solución podría ser pasar la propia referencia como prop al componente hijo en lugar de la función
onClick
. Por ejemplo:En el componente padre:
En el componente hijo:
De esta forma, el componente hijo puede acceder directamente a la referencia sin necesidad de utilizar la función
onClick
como intermediario.Alternativamente, se podría enlazar el contexto de
this
a la funciónonClick
utilizandobind(this)
. Por ejemplo:En el componente padre:
Y en la función
handleClick
:De esta forma, la función siempre se llamará con el contexto de
this
correcto, y el componente hijo aún puede activarla a través de la proponClick
.