【问题标题】:React TypeScript 2.3 -> typesafe React Bootstrap FormControl onChangeReact TypeScript 2.3 -> typesafe React Bootstrap FormControl onChange
【发布时间】:2017-11-29 04:16:49
【问题描述】:

使用此代码时,我收到错误 Property 'type' does not exist on type 'EventTarget'checkedvaluename 也是如此。

按照代码我可以看到FormEvent 继承自SyntheticEvent,而target: EventTarget 又具有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)} />

【问题讨论】:

标签: javascript reactjs typescript react-bootstrap react-tsx


【解决方案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" />

【讨论】:

  • onChange 事件处理程序(即onChange={(event) =&gt; this.handleChange(event as any)})中使用粗箭头与仅使用onChange={this.handleChange} 相比有什么好处?
  • 糟糕!好的,我想我明白为什么你不能使用第二个选项了。根据 TypeScript 2.X 编译器,事件类型不兼容。
  • 我使用它是因为箭头函数没有自己的thisarguments bindingthis.setState 否则将无法正常工作。我可以使用 bind 来实现同样的目的,但我认为这更干净。 facebook.github.io/react/docs/handling-events.html
猜你喜欢
  • 2017-07-20
  • 2017-12-17
  • 2017-07-15
  • 2017-10-12
  • 2020-06-30
  • 1970-01-01
  • 2017-05-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多