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）我已经将“target”属性输入为window.HTMLInputElement，它具有value属性，那么为什么Flow坚持 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

Flow给出错误“无法为此赋值[value]。[property]因为[class]中缺少property [property]”

1 个答案: