bugfix> reactjs > 投稿

これは動作します:

// @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は初めてですが、マスターすることに本当に興味があります!