Tengo un formulario en React TypeScript que se ve así:
<form onSubmit={handleSubmit}> <input type="text" className="form-control" ref={firstName} name="firstName" id="firstName"/> <input type="text" className="form-control" ref={lastName} name="lastName" id="lastName"/> </form> const handleSubmit = e => { e.preventDefault(); const data = { firstName: firstName.current.value, lastName: lastName.current.value, } let formdata = JSON.stringify(data); history.push({ pathname: '/review', state: { details: formdata } }); } const firstName = React.useRef(null); const lastName = React.useRef(null);Esto funciona bien ya que obtenemos valores vacíos en firstName y lastName del campo. Pero cuando lo cambio a:
const firstName = React.useRef(SomeObject.name);Y elimine el valor dentro del método handleSubmit,
const handleSubmit = e => { e.preventDefault(); const data = { firstName: firstName.current, <-- Change here lastName: lastName.current.value, } let formdata = JSON.stringify(data); history.push({ pathname: '/review', state: { details: formdata } }); }Estoy teniendo el siguiente error:
TS2322: Type 'MutableRefObject<string>' is not assignable to type 'LegacyRef<HTMLInputElement>'. Type 'MutableRefObject<string>' is not assignable to type 'RefObject<HTMLInputElement>'. Types of property 'current' are incompatible. Type 'string' is not assignable to type 'HTMLInputElement'.En la referencia (ref={firstName})
¿Qué hice mal aquí? Acabo de inicializar la variable de estado de forma estática en lugar de nula, debería funcionar bien, ¿verdad? ¿Alguien podría ayudarme a señalar dónde me estoy perdiendo? He intentado varias formas de usar esta referencia, pero fue en vano.
Editar: enlace CodeSandbox: https://codesandbox.io/s/cool-cache-hzu6r?file=/src/App.js
Cuando asigna una referencia a la propiedad ref de un componente, se convertirá en una referencia para ese componente cuando se monte.
En su caso, se convertirá en una referencia a HTMLInputElement. Entonces, TypeScript espera que se asigne una referencia con el tipo React.LegacyRef a la propiedad ref del elemento de entrada.
React.useRef(null) devuelve una referencia con el tipo React.MutableRefObject que se puede asignar a React.LegacyRef, porque cualquiera se puede asignar a HTMLInputElement o cualquier otra cosa.
React.useRef(SomeObject.name) devuelve React.MutableRefObject (porque SomeObject.name es una cadena) y no se puede asignar a React.LegacyRef porque la cadena no es un HTMLInputElement.
Lo que estás haciendo mal aquí depende de lo que estés tratando de hacer.
Si desea tener una referencia a un elemento, asigne un resultado de React.useRef() a la propiedad ref del componente que representa el elemento.
Si desea pasar una referencia a un componente como accesorio, hágalo con alguna propiedad diferente, por ejemplo. algunaRef.
Si desea tener una variable de estado, use el estado y no las referencias.