javascript - Att ge HTML-formulär till FormData genom event.target ger felet Argument of type 'EventTarget' is not assignable to parameter of type 'HTMLFormElement'

Jag försöker få värdena från ett form till FormData:

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const value = formData.get('origin') ? 'open' : 'on';
    updateResizingOptionsQuery.mutate({ value });
  };

Eftersom React skickar SynteticEvents passar inte gränssnittet för e.target med FormData-konstruktören. I exemplet gör jag en typomvandling, vilket inte är idealiskt. Vad skulle vara en bättre version av den koden?

Utan typomvandling kastas detta lint-fel:

Argument av typen 'EventTarget' kan inte tilldelas en parameter av typen 'HTMLFormElement'. Typen 'EventTarget' saknar följande egenskaper från typen 'HTMLFormElement': acceptCharset, action, autocomplete, elements, och 297 till.

Svar #1

Att använda e.currentTarget istället för e.target fungerar. Eftersom currentTarget alltid refererar till det element som har händelselyssnaren, vet TypeScript att det är <form>:

import { FormEvent } from "react";
export default function App() {
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  const value = formData.get("origin") ? "open" : "on";
  updateResizingOptionsQuery.mutate({ value });
};
  return (
    <div className="App">
      <form onSubmit={handleSubmit}></form>
    </div>
  );
}

Relaterade artiklar