reactjs - 流程给出错误 "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;
  };
...

错误消息为:无法获取 e.target.value，因为 EventTarget 中缺少属性值。

1) 我已经输入了“target”属性为 window.HTMLInputElement，它有一个 value 属性，那么为什么 Flow 坚持认为 EventTarget< 中缺少属性值/strong>(为什么选择 EventTarget？)

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

我真的很困惑它是如何工作的 - 我读过 this和 this ，似乎有很多解决方法/解决方案，但我不确定它们为什么有效。另外，这些都是 2-3 年前的了，我不确定它们现在是否仍然相关。我是 Flow 新手，但真的很想掌握它!

Answer 1

使用SyntheticInputEvent<*>

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

或

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

您可能想要check the docs还有cheet sheets