React TypeScript 2.3 -> типизированный React Bootstrap FormControl onChange
При использовании этого кода я получаю ошибку Property 'type' does not exist on type 'EventTarget'
, То же самое для checked
, value
а также name
,
Следуя коду, я вижу, что FormEvent
наследуется от SyntheticEvent
что в свою очередь имеет target: EventTarget
, У EventTarget нет свойств, которые мне нужны. Если я вместо этого отмечу event
как any
(event: any
) код работает без нареканий. Как я могу это исправить? Я попытался с обычным вводом HTML, а затем он работал, установив событие как React.ChangeEvent<HTMLInputElement>
,
handleChange(event: React.FormEvent<React.Component<ReactBootstrap.FormControlProps, {}>>) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
...
<FormGroup controlId="Email">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl name="email" type="email" value={this.state.email} onChange={(event) => this.handleChange(event)} placeholder="Email" />
</Col>
</FormGroup>
Рабочий код с вводом:
handleChange(event: React.ChangeEvent<HTMLInputElement>) {
...
}
...
<input
name="email"
type="email"
value={this.state.email}
onChange={(event) => this.handleChange(event)} />
1 ответ
Решение
Решил это так:
handleChange(event: React.ChangeEvent<HTMLInputElement>) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name as any;
this.setState({
[name]: value
});
}
...
<FormControl name="email" type="email" value={this.state.email} onChange={(event) => this.handleChange(event as any)} placeholder="Email" />