0

Только начал разбираться в том как работать в связке react + typescript и уже назрел один вопрос) Существует компонент Login в котором есть форма авторизации. На событие onSubmit я хочу выбрать из этой формы поля email и password при помощи этого выражения event.target.elements. Но typescript ругается и выдает такую ошибку Property 'elements' does not exist on type 'EventTarget'. Подскажите пожалуйста как мне можно исправить эту ошибку, стоит просто написать вместо (event: React.FormEvent) это (event: any) или есть другой способ?

interface LoginProps {
 history?: {}
}
const Login: React.FC<LoginProps> = ({ history }) => {
  const [loading, setLoading] = useState<Boolean>(false);

  const handleLogin = useCallback(async (event: React.FormEvent) => {
    event.preventDefault();

    const { email, password } = event.target.elements;

  }, [history]);

  return (
    <>
        <div className="auth">
      <form className="auth_form" onSubmit={handleLogin}>
        <div className="auth_in">
          <h5 className="title offset_mod">Log In</h5>
          <div className="auth_body">
            <div className="auth_w_input">
              <input
                type="text"
                className="input"
                name="email"
                placeholder="Email"
                aria-label="email"
                aria-describedby="addon-wrapping"
              />
            </div>
            <div className="auth_w_input">
              <input
                type="password"
                name="password"
                className="input"
                placeholder="Password"
                aria-label="password"
                aria-describedby="addon-wrapping"
              />
            </div>
          </div>
          <div className="auth_footer">
            <button type="submit" className="btn primary_state btn_auth">Log In</button>
          </div>
        </div>
      </form>
    </div>

    </>
7
  • (e.target as HTMLFormElement).elements, но я не уверен, насколько это best practices. То есть кастинг к форме. Но это точно сработает :) Можно это всё в ифчик обернуть, в которо проверять наличие формы в доме, чтобы уже точно не облажатсья. 14 фев 2020 в 8:10
  • @AlexSazonov спасибо большое за ответ, теперь я получаю те данные что надо, но только если просто присваиваю их в переменную. Но деструктуризацию я не могу сделать, пишет такую ошибку prnt.sc/r3d47h можете пожалуйста подсказать как и эту проблему можно решить?)
    – Lorax
    17 фев 2020 в 7:08
  • Так а деструктуризация и не получится. Это ж не объект. Это массив. Даже не массив, а коллекция. Чтобы с ней как с массивом работать, надо к массиву привести сначала. То есть это будет что-то вроде let elementsArray = Array.from((e.target as HTMLFormElement).elements). но опять же, это не объект. Это массив. То есть чтобы получть какой-то элемент, придётся работать как с массивом. Например const mailInput = elementsArray[0], ну это условно, я не знаю какая там у тебя форма. Хотелось бы, конечно, по красоте, но не выйдет :) 17 фев 2020 в 7:30
  • @AlexSazonov понял спасибо. Возможно в этом случае тогда будет лучше просто через useRef сохранить эти инпуты и потом брать с них значение? const emailInput = React.useRef<HTMLInputElement | null>(null); const passwordInput = React.useRef<HTMLInputElement | null>(null);
    – Lorax
    17 фев 2020 в 7:35
  • 2
    Возможный дубликат вопроса: Как задать нужный тип в TS
    – qwabra
    18 фев 2020 в 7:29

1 ответ 1

0

TS и типы

T1: {
    const isForm = (q: any): q is HTMLFormElement => q instanceof HTMLFormElement
    const foo = (e: Event) => {
        if (isForm(e.target)) {
            const { } = e.target.elements;
        }
    }
}
T2: {
    interface $elements {
        email: HTMLInputElement;
        password: HTMLInputElement;
    }
    const foo = (e: Event) => {
        if (e.target) {
            const form = e.target as HTMLFormElement
            const { email, password }: $elements = form.elements as any;
        }
    }
}

React

работу с формами в реакте оставлю за рамками ответа

2
  • спасибо большое за ответ, ваш способ мне гораздо больше нравится чем мой с использованием useRef в реакте)
    – Lorax
    19 фев 2020 в 7:11
  • preactjs.com/guide/v10/forms
    – qwabra
    19 фев 2020 в 10:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.