typescript 我有一个关于React事件中类型Assert的问题

hlswsv35  于 2023-05-01  发布在  TypeScript
关注(0)|答案(1)|浏览(116)

我试图找出一种方法来为onChange事件和onClick事件创建一个事件处理程序。但是当使用typescript时,我很难弄清楚这一点。
我试过像这样写SyntheticEvent<HTMLElement>,但如果我这样做,我就不能使用event.target.nameevent.target.value

yr9zkbsy

yr9zkbsy1#

如果您提供一些代码,我们可以提供更好的帮助。但我尽力根据你的描述。
两种情况的类型定义:

type InputChangeEvent = React.ChangeEvent<HTMLInputElement>;
type ButtonClickEvent = React.MouseEvent<HTMLButtonElement>;

一个帮助函数(ts type guard)来区分它们:

const isInputChangeEvent = (
    event: InputChangeEvent | ButtonClickEvent
  ): event is InputChangeEvent => {
    return (event as InputChangeEvent).target !== undefined;
  };

一个通用的事件处理程序,可以处理以下两种情况:

const handleEvent = (event: InputChangeEvent | ButtonClickEvent) => {
    if (isInputChangeEvent(event)) {
       console.log("I know this was an input change event!");
    } else {
      console.log("I know this was a click event!");
    }
  };

相关问题