Estoy tratando de obtener el tipo correcto para este parámetro de función
const handleInputChange = ({ target }) => { setFormValues({ ...formValues, [target.name]: target.value, }); };me arroja un error que no bloqueó la aplicación, pero sé que no es una buena práctica.
para dar más contexto, todos los campos que están cambiando son cadenas.
Te dice eso porque no le has dicho cuál es el tipo de parámetro.
Necesitas decirle de qué tipo es. Hay un par de maneras:
Escriba la constante a la que está asignando la función; o
Escriba directamente el parámetro
Puede hacerlo con el tipo ChangeEventHandler , que es genérico, tomando el tipo del elemento como argumento de tipo:
import { ChangeEventHandler } from "react"; // ... const onChange: ChangeEventHandler<HTMLInputElement> = ({currentTarget}) => { // type −−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ console.log(`${currentTarget.name} => ${currentTarget.value}`); }; El parámetro es un objeto de evento que tiene una propiedad currentTarget , por lo que si (por ejemplo) se usa en un HTMLInputElement , puede usar el tipo { currentTarget: HTMLInputElement } :
const handleInputChange = ({ currentTarget }: { currentTarget: HTMLInputElement }) => { // type −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // ... }; O puede usar ChangeEvent<T> :
import { ChangeEvent } from "react"; // ... const handleInputChange = ({ currentTarget }: ChangeEvent<HTMLInputElement>) => { // type −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // ... }; Tenga en cuenta que usé currentTarget en lugar de target . Por lo general, no importa para los elementos de input ( target y currentTarget siempre son los mismos si el controlador está en la input , no en su padre/ancestro), pero sí lo es para los elementos de button y algunos otros (ya que target puede ser un elemento descendiente ). Y es importante si está manejando el change en un elemento padre/ancestro en lugar de en la input directamente.