javascript - Beste praksis for håndtering av skjemainnsending i React + Typescript

Jeg refaktorerer mye av koden min til TypeScript, ettersom jeg nettopp har begynt å bli kjent med TS. Når TS tvinger HTML-elementtypen på React-hendelsen, har det fått meg til å tenke på hvordan jeg lager skjemaene mine og håndteringen av innsending av hendelser.

Jeg har alltid brukt et <button />-element med en onClick={this.handleSubmission}-hendelsesbehandler knyttet til det. Nå har HTML-elementtypen som spesifiserer på React-hendelsen fått meg til å tenke at det ser ut til å være to hovedmåter å håndtere skjema-innsending på - ved å fange klikkhendelsen på en innsending-knapp (som ovenfor) eller ved å fange onSubmit-hendelsen på selve skjemaet. Disse ser ut til å bli typet som følger i TypeScript: -

(e: React.MouseEvent<HTMLButtonElement>)
(e: React.FormEvent<HTMLFormElement>)

Er det virkelig noen forskjell mellom de to når det gjelder beste praksis? Jeg vil anta at et klikk på en innsending-knapp (forutsatt at det er et ekte HTML-knappelement) alltid vil bli håndtert av (e: React.MouseEvent<HTMLButtonElement>). Imidlertid vil <input type="submit" value="Submit" /> virke å være (i TS-termer) et ekte FormEvent på HTMLFormElement siden det ikke kan være et knapp-begivenhet.

Finnes det en beste praksis eller teknisk krav, eller er det bare opp til personlig preferanse? Takk.

Svar #1

Å ikke bruke FormEvent øker bekymringene, så å fange opp FormEvent vil spare deg tid. Hvis vi bestemmer oss for å bruke MouseEvent i stedet for FormEvent, bør vi være oppmerksomme på standardene, ved å legge til e.preventDefault().

og bruk av type-attributtet til <button /> vil gjøre merkene mer deklarative.