流给出错误"Cannot assign [value] to this.[property] because property [property] is missing in [class]"

Question

这有效：

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

type Props = {};
class Delete extends Component<Props> {
targetElement: null | winndow.HTMLInputElement;
constructor(props: Props) {
super(props);
this.targetElement = null; // initialize to null
}
handleClick = (e: SyntheticEvent<> & {target: window.HTMLInputElement}) => {
this.targetElement = (e.target: window.HTMLInputElement).value;
};
render() {
return (
<input onClick={this.handleClick} value="hello" />
);
}
}
export default Delete;

但这不会：

...
handleClick = (e: SyntheticEvent<> & {target: window.HTMLInputElement}) => {
this.targetElement = e.target.value;
};
...

错误消息是：Cannot get e.target.value because property value is missing in EventTarget。

1(我已经键入了要window.HTMLInputElement的"目标"属性，该属性具有值属性，那么为什么Flow坚持EventTarget中缺少属性值(为什么是EventTarget？

首先，在我添加 Flow 注释之前，代码运行良好，并且没有关于缺少属性的控制台错误。

我真的很困惑这是如何工作的 - 我已经阅读了这个和这个，似乎有大量的解决方法/解决方案，但我不确定它们为什么有效。另外，这些是2-3岁的，我不确定它们现在是否仍然相关。我是Flow的新手，但真的很有兴趣掌握它！

Answer 1

使用SyntheticInputEvent<*>

handleClick = (e: SyntheticInputEvent<*>) => {
this.targetElement = e.target.value;
};

或

handleClick = (e: SyntheticEvent<HTMLInputElement>) => {
this.targetElement = e.target.value;
};

您可能想检查文档和表

。