Type of an event in TypeScript in React

Question

I have the following event in onSubmit using React and I am changing it from Javascript to TypeScript.

const submitUserHandler = (e) => {

e.preventDefault();
dispatch(
  authenticate({
    name: e.target.personname.value,
    pw: e.target.password.value,
  })
);
};

I have tried assigning 'e: React.ChangeEvent' to the event, but it prompts an error like this:

Property 'personname' does not exist on type 'EventTarget & HTMLInputElement'.

How could I specify the type also including personname and password? Thanks!

e.target will equal to your HTMLInput Element I believe. Need to see your HTML, why there is property of "personname" in the element — vdj4y
– vdj4y, Commented Jan 23, 2021 at 15:27
typescript does not support inside event yet. You can use to pass this case: (e.target as any).personname.value — cuongdevjs
– cuongdevjs, Commented Jan 23, 2021 at 16:40

DevLoverUmar · Accepted Answer · 2021-01-23 15:24:48Z

7

You can do something like this

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      personname: { value: string };
      password: { value: string };
    };
    const email = target.personname.value; // typechecks!
    const password = target.password.value; // typechecks!
    // etc...
  }}
>
  <div>
    <label>
      Email:
      <input type="personname" name="personname" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input type="password" name="password" />
    </label>
  </div>
  <div>
    <input type="submit" value="Log in" />
  </div>
</form>

For details, reference

edited Jan 23, 2021 at 15:24

answered Jan 23, 2021 at 15:18

DevLoverUmar

14.3k16 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Type of an event in TypeScript in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related