React + Typescript: как обрабатывать события

Как следует обрабатывать события с помощью React и Typescript? Кажется, я не могу правильно набрать текст, чтобы иметь общий обработчик ввода, как документы React в обычном JS.

state = {
  userId: '',
  amount: undefined,
  type: 'CREDIT',
  note: '',
};

handleChangeEvent = (event: React.FormEvent<HTMLInputElement>) => {
  this.setState({
    [event.target.name]: event.target.value
  });
};

Как вы можете видеть, у меня есть сочетание ключей состояния и типов значений, и поскольку тип события не привязан ни к одному из них, то переменный ключ [event.target.name] не работает с ошибкой ...

Argument of type '{ [x: string]: any; }' is not assignable to parameter of type 'State | Pick<State, "type" | "userId" | "amount" | "note">...

Как лучше всего обойти это, кроме создания специального обработчика событий для каждого поля?

Я настоятельно рекомендую использовать разные обработчики для каждого поля. То, что вы делаете, контрастирует с самой основной идеей Typescript.

tocqueville 07.07.2018 12:33

Основная идея машинописного текста - обеспечить безопасность типов. Я спрашиваю, есть ли способ обрабатывать несколько полей на основе перечислений или типов, которые обеспечат безопасность типов, одновременно сжимая некоторый код.

deltaskelta 07.07.2018 12:47

Использование одного обработчика для всех полей является анти-шаблоном в Typescript, потому что это заставит вас вручную указывать тип каждый раз, когда вы используете функцию, что еще более подвержено ошибкам, чем отсутствие типов вообще.

tocqueville 07.07.2018 18:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
225
0

Другие вопросы по теме