React TypeScript 2.3 -> 安全类型的 React Bootstrap FormControl onChange

Question

当我使用这段代码时，出现了错误属性"type"在类型"EventTarget"上不存在。 checked，value和name也是如此。

根据代码，我可以看到FormEvent从SyntheticEvent继承，而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)} />

- Ogglas

---

未来参考，请参见 https://github.com/react-bootstrap/react-bootstrap/issues/2781 - Arjan

Answer 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" />

- Ogglas

---

在 onChange 事件处理程序中使用箭头函数（即 onChange={(event) => this.handleChange(event as any)}）与仅使用 onChange={this.handleChange} 相比有什么好处？ - Henry Daehnke

哎呀！好的，我想我明白为什么你不能使用第二个选项了。根据TypeScript 2.X编译器，事件类型不兼容。 - Henry Daehnke

我使用这个是因为箭头函数没有自己的 this 或 arguments 绑定。否则，this.setState 将无法工作。我可以使用 bind 来实现相同的功能，但我认为这样更简洁。 https://facebook.github.io/react/docs/handling-events.html - Ogglas