Свойство «значение» не существует для типа FormEvent в TypeScript

avatar
Jamie Hutber
8 августа 2021 в 20:36
226
1
0

Я изо всех сил пытаюсь ввести поиск для всех элементов ввода внутри отправленной формы.

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const inputs = e.target.getElementsByTagName('input') as HTMLInputElement; //TS2339: Property 'getElementsByTagName' does not exist on type 'EventTarget'.
  };
  return (
        <form onSubmit={submit}>
          <input type="date" name="date" placeholder="e.g. 10/11/1984" />
        </form>
    </>
  );

Полная ошибка TS

/var/www/src/Pages/NewClaim/index.tsx
TypeScript error in /var/www/Pages/NewClaim/index.tsx(47,27):
Property 'getElementsByTagName' does not exist on type 'EventTarget'.  TS2339

    45 |     e.preventDefault();
  > 46 |     const inputs = e.target.getElementsByTagName('input') as HTMLInputElement;
       |                           ^
    48 |     const newClaimData = await createClaim();
Источник
jonrsharpe
8 августа 2021 в 20:37
0

(e.target as ...).get...? Вы в настоящее время утверждаете на всем этом.

Ответы (1)

avatar
Samuel Goldenbaum
16 сентября 2021 в 21:12
0

Ваш кастинг немного неверен – см. фрагмент ниже.

getElementsByTagName также возвращает HTMLCollection, поэтому не может привести к одному HTMLInputElement

export default function App() {
  const submit = async (e: FormEvent) => {
    e.preventDefault();

    const inputs = (e.target as HTMLFormElement).getElementsByTagName("input") as HTMLCollection;
    console.info(inputs[0]);

    // the element
    const startDate = inputs[0] as HTMLInputElement;
    console.info(startDate);

    // also an option
    const formData = new FormData(e.target as HTMLFormElement);
    console.info(formData.get("start-date"));
  };

  return (
    <form onSubmit={submit}>
      <input type="date" name="start-date" placeholder="e.g. 10/11/1984" />
      <input type="date" name="end-date" placeholder="e.g. 10/11/1984" />
      <button type="submit">Submit</button>
    </form>
  );
}