Skip to content

Instantly share code, notes, and snippets.

@weslleyaraujo

weslleyaraujo/typed-form-submission.tsx

Created April 26, 2021 10:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save weslleyaraujo/a72da842075f7608be5bddc1e9ec443d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save weslleyaraujo/a72da842075f7608be5bddc1e9ec443d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. weslleyaraujo created this gist Apr 26, 2021.
    23 changes: 23 additions & 0 deletions typed-form-submission.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    // Define which elements this form is going to have
    interface FormElements extends HTMLFormControlsCollection {
    fieldName: HTMLInputElement;
    }

    // Set a "HTMLFormElement" interface with those elements
    interface MyForm extends HTMLFormElement {
    readonly elements: FormElements;
    }

    function Foo() {
    return (
    <form onSubmit={(event: React.SyntheticEvent<MyForm>) => {
    // form elements are going to be defined under:
    event.currentTarget.elements;

    // get value of a field
    event.currentTarget.elements.fieldName.value;
    }}>
    {/* ... */}
    </form>
    );
    }