Estoy usando material UI para crear una página de inicio de sesión y registro, usando useRef para devolver una instancia de referencia de TextFiled y xxxRef.current.value para obtener el valor de entrada.
Puedo ejecutar mi proyecto sin problemas y obtener el value correctamente, pero la consola siempre me recordó que:
Property 'value' does not exist on type 'never'.Aquí están mis fragmentos de código:
const accountRef = useRef(); <TextField variant="outlined" margin="normal" required fullWidth id="account" label="Account" name="account" autoComplete="account" autoFocus defaultValue={account} inputRef={accountRef} /> const payload = { account: accountRef.current?.value ?? '', password: passwordRef.current?.value ?? '', nickname: nicknameRef.current?.value ?? '', };useRef es genérico si lo usa con TypeScript, por lo que puede definir el tipo de elemento al que se hace referencia como const ref = useRef<Type>();
Mirando las definiciones de tipo para la propiedad inputRef en MaterialUI, dice:
/** * Pass a ref to the `input` element. */ inputRef?: React.Ref<any>;Entonces, para una solución, puede definir sus referencias como:
const accountRef = useRef<any>();Pero la referencia se pasa a través del campo de entrada dentro del componente, el mejor tipo sería:
const accountRef = useRef<HTMLInputElement>();La respuesta correcta debe ser el tipo correcto (HTMLInputElement) al usar useRef():
const inputRef = useRef<HTMLInputElement>(); const [caretPosition, setCaretPosition] = useState<number | null>(null); const updateCaretPosition = () => { inputRef.current && setCaretPosition(inputRef.current.selectionStart); };Tenga en cuenta que hay otros tipos que podrían agregarse a useRef.
Algunos otros tipos tal vez:
HTMLElementHTMLFormElementnumberstringuseRef se usa comúnmente para usar una referencia de un elemento HTML, pero también podría usarse para almacenar datos.