Búsqueda de sitios web

reactjs - Accediendo a la propiedad event.target.elements en TypeScript desde un evento de envío de formulario

Tengo el siguiente código de React que funciona bien en JavaScript:

function handleSubmit(event) {
  event.preventDefault()
  console.dir(event.target[0].value)
  console.dir(event.target.usernameInput.value)'EventTarget'.
  console.dir(event.target.elements.usernameInput.value)
}

return (
  <form onSubmit={handleSubmit}>
    <label htmlFor="usernameInput">Username:</label>
    <input id="usernameInput" type="text" onChange={handleChange} />
[...]

Me gustaría hacer lo mismo con TypeScript pero no puedo acceder a event.target[0], event.target.elements ni event.target.usernameInput, en su lugar obtengo "La propiedad '0' no existe en el tipo 'EventTarget'" y "La propiedad 'usernameInput' no existe en el tipo 'EventTarget'"

Este es el código ts:

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()

  console.dir(event.target[0].value) // Property '0' does not exist on type 'EventTarget'.
  console.dir(event.target.usernameInput.value) // Property 'usernameInput' does not exist on type 'EventTarget'.
  console.dir(event.target.elements.usernameInput.value) // Property 'elements' does not exist on type 'EventTarget'.

¿Cómo puedo acceder a cualquiera de esas propiedades?

Respuesta #1

Si quieres obtener una referencia al formulario en TypeScript, usa currentTarget en lugar de target:

const form = event.currentTarget;
// do stuff with form
// form[0] will be typed as Element, which you can cast to an HTMLInputElement

Pero la mejor manera de examinar los valores de un formulario en React sería usar componentes controlados y, al enviar, mirar la variable con estado que corresponde al valor:

const App = () => {
    const [username, setUsername] = useState('');
    const handleSubmit = () => {
        console.log(username);
    };
    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="usernameInput">Username:</label>
            <input
                id="usernameInput"
                value={username}
                onChange={(e) => { setUsername(e.currentTarget.value); }}
            />
        </form>
    );
};

Artículos relacionados