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" />
Другие вопросы по тегам