Как следует обрабатывать события с помощью 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, потому что это заставит вас вручную указывать тип каждый раз, когда вы используете функцию, что еще более подвержено ошибкам, чем отсутствие типов вообще.





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