javascript - Type of an event in TypeScript in React - Stack Overflow

admin管理员组

文章数量:1424936

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!

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!

• javascript
• reactjs
• typescript
• react-redux
• react-typescript

Share Improve this question Follow edited Jan 23, 2021 at 15:25 DevLoverUmar 14.1k1515 gold badges7878 silver badges111111 bronze badges asked Jan 23, 2021 at 15:13 David SolsonaDavid Solsona 4311 silver badge55 bronze badges 2

• 1 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 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 Commented Jan 23, 2021 at 16:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptType of an event in TypeScript in ReactStack Overflow