javascript - TypeScript：如何在不出错的情况下访问 onChange 事件数据？（对象可能为 'null'）

请参见下面的最小示例：

/** @jsx h */
import { h, FunctionalComponent } from 'preact';

const Test: FunctionalComponent = () => {
  return (
    <select
      value="1"
      onChange={(event) => {
        console.log(event.target.value);
      }}
    >
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  );
};

我如何解决出现 对象可能为 'null' 的错误？

答案＃1

这是一个“TypeScript 安全检查”，用来提醒你 event.target 可能为 null，这会导致访问 event.target.value 在运行时抛出错误。

此警告/错误可以通过使用“非空断言操作”来消除：

<select value="1" onChange={(event) => {
    /* Add ! after target to state that "event.target!" is defined and 
       that value field can be safely accessed. This is a non-null 
       assertion */
    console.log(event.target!.value);
}}>

或者在访问之前检查 event.target 是否已定义：

<select value="1" onChange={(event) => {

    const { target } = event;
    if(target) {
        /* The ! is not needed seeing target is dedeuced as being defined */
        console.log(target.value);
    }
}}>

答案＃2

在访问 event.target.value 之前，请确保检查它。见下文

    <select value="1" onChange={(event) => {
    event.target.value? console.log(event.target.value):null;
}}

我在选择文件时遇到了类似的问题

<input
  type="file"
  onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
    formik.setFieldValue(
      "file",
      (event?.target.files && event?.target?.files[0]) ?? ""
    );
    formik.setFieldValue(
      "fileName",
      (event?.target.files && event?.target?.files[0].name) ?? ""
    );
  }}
/>;