如何在导出的 React 组件中注释 onChange 事件？

Question

我有一个带有 onChange 处理程序的 React 组件：

// @flow
import React, {Component} from 'react';

export default class MyList extends Component {
  handleChange = (event) => {
    // Do something with event.target.value
    // which will be the value typed in the input field.
  }

  render() {
    return (
      <input type="text" onChange={this.handleChange}> />
    );
  }
}

Flow 对此表示抱怨，因为它是导出的 class： Parameter `event` missing annotation

如何在 handleChange 函数中注释 event 参数？据我所知，此事件是在 JavaScript 级别生成的，并且没有任何流类型。

或者，能否将 Flow 配置为不显示这些 "missing annotation" 错误？

Answer 1

你可以在这里找到打字https://github.com/facebook/flow/blob/master/lib/dom.js

handleChange = (event: Event) => {
  if (event.target instanceof HTMLInputElement) {
    console.log(event.target.value)
  }
}

Answer 2

我找到了另一种解决方案，使用合成事件：如下所示

onChange (event: SyntheticInputEvent<EventTarget>): void {
  this.setState({ text: event.target.value })
}

如何在导出的 React 组件中注释 onChange 事件？

How should an onChange event be annotated in an exported React Component?

javascript

reactjs

flowtype