Тип события в TypeScript в React

У меня есть следующее событие в onSubmit с использованием React, и я меняю его с Javascript на TypeScript.

const submitUserHandler = (e) => {

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

Я попытался назначить событию e: React.ChangeEvent, но он вызывает такую ​​ошибку:

Свойство personname не существует для типа EventTarget & HTMLInputElement.

Как я могу указать тип, включая имя пользователя и пароль? Спасибо!


reactjs typescript javascript react-redux react-typescript
person David Solsona    schedule 23.01.2021    source источник
comment
Я полагаю, что e.target будет равен вашему элементу HTMLInput. Нужно увидеть ваш HTML, почему в элементе есть свойство personname   -  person vdj4y    schedule 23.01.2021
comment
Машинопись пока не поддерживает внутренние события. Вы можете использовать для передачи этого случая: (e.target как любое) .personname.value   -  person cuongdevjs    schedule 23.01.2021

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать что-то вроде этого

<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>

Подробнее см. В справке.

person DevLoverUmar    schedule 23.01.2021