我试图找出一种方法来为onChange事件和onClick事件创建一个事件处理程序。但是当使用typescript时,我很难弄清楚这一点。我试过像这样写SyntheticEvent<HTMLElement>,但如果我这样做,我就不能使用event.target.name或event.target.value。
onChange
onClick
SyntheticEvent<HTMLElement>
event.target.name
event.target.value
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!"); } };
1条答案
按热度按时间yr9zkbsy1#
如果您提供一些代码,我们可以提供更好的帮助。但我尽力根据你的描述。
两种情况的类型定义:
一个帮助函数(ts type guard)来区分它们:
一个通用的事件处理程序,可以处理以下两种情况: