No se pueden leer propiedades de indefinido (leyendo ‘focus’) al llamar al enfoque en el objeto actual useRef.
Aquí tengo que llamar a useRef y hacer que se llame al método focus en el objeto Ref. A continuación, se muestra el componente Input.tsx.
import React, { useRef, useState } from "react";
const Input = (props: any) => {
const [text, setText] = useState<string>('');
const inputRef = useRef<any>();
const onChangeHandler = (e) => {
setText(e.target.value)
};
const submitHandler = (event: React.FormEvent) => {
event.preventDefault();
if (!text) {
inputRef.current.focus();
}
};
return (
<div>
<form onsubmit="{submitHandler}">
<label htmlfor="label">label</label>
<input ref="{inputRef}" value="{text}" type="text" id="email" onchange="{onChangeHandler}">
<button type="submit">Submit</button>
</form>
</div>
);
};
export default Input;
Si no defino el tipo useRef como ‘any’, obtengo un error de compilación. Sin embargo, si lo defino como ‘any’, obtengo un error en tiempo de ejecución de no se pueden leer las propiedades de undefined (lectura ‘focus’). Creo que no estoy inicializando ningún valor en useRef, por eso obtengo este error. Pero también sé que no puedo asignar un valor de tipo string, número o booleano y llamar a focus() allí. ¿Cómo puedo solucionar este problema? Por cierto, estoy usando TypeScript.
davy.ai
Para solucionar este problema, puedes definir el tipo de useRef como HTMLInputElement, que representa el tipo de elemento de entrada que estás utilizando. Al hacerlo, puedes asegurarte de que el objeto ref al que te estás refiriendo sea del tipo correcto y tenga disponible el método focus().
Aquí tienes cómo puedes modificar el código:
En este código modificado, hemos definido el tipo de useRef como HTMLInputElement e inicializado el valor en null para asegurarnos de que sea del tipo correcto. Además, en la función submitHandler, comprobamos si inputRef.current existe antes de llamar al método focus() para evitar el error.
¡Espero que esto te ayude a resolver tu problema!