@webjun

Как определить тип события?

Последнее время стараюсь писать на тс и часто сталкиваюсь с непониманием как описать события, вот например у меня есть инпут и на него я цепляю обработчик:

<input
            className="input"
            placeholder="Enter your film.."
            value={search}
            onChange={updateSearch}
          />

Далее я должен описать тип события:

const updateSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
    setSearch(event.target.value);
  };

Получаю ошибку:

Type '(event: React.KeyboardEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLInputElement>' is missing the following properties from type 'KeyboardEvent<HTMLInputElement>': altKey, charCode, ctrlKey, code, and 11 more.

Может есть какие-то таблицы с типами ивентов или какие-то расширения для тс?
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
@HealSpirit
const updateSearch: ChangeEventHandler<HTMLInputElement> = (event) => {};
или
const updateSearch = (event: ChangeEvent<HTMLInputElement>) => {};


Как это получить? Кликнуть с зажатым левым ctrl левой кнопки мыши в vscode на onChange
Попадем в типы реакта и увидим:
onChange?: ChangeEventHandler<T> | undefined;
Поймем, что ChangeEventHandler это функция, которая принимает в качестве параметра event с определенным типом (думаю пока этого достаточно, там потом можно потеряться что дальше происходит)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы