javascript - TypeScript 和 event.target ||事件.srcElement

Question

我是 TypeScript 新手，正在 React.js 中重写箭头函数。

这是目前的样子:

  handleChange = (event): void => {
    const target = event.target || event.srcElement;

    this.setState({
      value: target.value
    });
  };

handleChange() 不会返回任何内容，只会改变 state，因此它的类型设置为 void。

在这种情况下，event 和 target 应该具有什么类型？我需要支持最广泛的浏览器，这就是为什么 target 可以是 event.target 或 event.srcElement，如果 event.target 未定义。

对此的任何帮助将不胜感激。

更新功能:

  handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    this.setState({
      value: event.target.value
    });
  };

Answer 1

事件的类型为React.MouseEvent，目标将取决于被单击的元素。您可以将元素作为泛型类型传递给 MouseEvent 类型，因此无需显式键入目标元素，因为这将由泛型确定。例如:

handleChange = (event: React.MouseEvent<HTMLButtonElement>): void => {
    const target = event.target || event.srcElement;

    this.setState({
      value: target.value
    });
  };

如果单击的元素是标准 HTML 按钮元素，则准确。

编辑:看起来我忘记了非鼠标事件的存在。大多数常用事件的 React 类型定义中都存在类似的类型。如果您正在处理自定义事件或不存在适当的类型，请使用 SyntheticEvent。如果您正在寻找特定事件，请尝试搜索 official typings 。

另请注意，Typescript 类型不会影响浏览器支持。 Typescript 实际上只存在于开发中，以强制执行更周到的编程习惯并防止错误，但它最终会在部署之前转换为常规 JavaScript，因此只要它可以编译，不准确的键入不会产生明显的后果(除了可能导致的错误)。