Event Types 事件类型标注
最后更新：2026-10-28
Event Types 事件类型标注
事件类型来自 @types/react：onClick 标 MouseEvent<HTMLButtonElement>，onChange 标 ChangeEvent<HTMLInputElement>。标好后 currentTarget 才有准确的元素提示。
| 分组 | 数据与工程化 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
function SearchBox() {
const [kw, setKw] = useState('')
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setKw(e.currentTarget.value) // currentTarget 自动推导为 HTMLInputElement
}
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
}
return (
<form onSubmit={onSubmit}>
<input value={kw} onChange={onChange} />
</form>
)
}
// 行内写法可省标注：onChange={e => setKw(e.target.value)} —— e 自动推导返回值：无返回值，作为编码模式使用
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
输入触发 ChangeEvent<HTMLInputElement>、点击触发 MouseEvent<HTMLButtonElement>，最近 4 条记录显示在列表里——运行时是普通事件，TS 标注见 syntax 块。💡 要点
💡 提示 行内写法 onChange={e => …} 的 e 自动推导，无需手标；抽成独立函数才需要显式标注事件类型。
ℹ️ 说明 合成事件类型带泛型参数指定元素：不写时默认是 Element，标成具体元素后 currentTarget 提示更准。
⚠️ 注意 e.target 类型宽泛（可能是任意元素），读 value 前确认元素；e.currentTarget 指绑定处理的元素，类型总是精确的。
🏷️ 数据与工程化相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 为什么不直接用原生 MouseEvent 类型？
A React 事件是合成事件（跨浏览器封装），原生类型不含 React 的泛型推导，混用会拿到错误提示；统一用 React.MouseEvent 等。
Q 自定义组件的 onChange 怎么标？
A 由组件的 props 决定：type Props = { onChange: (v: string) => void }，调用方行内写的 e 按你的签名推导，无需合成事件类型。
Q 异步读取 e.currentTarget 报 null？
A 处理器返回后 currentTarget 会被置 null。要异步使用先存下来：const el = e.currentTarget，再在回调里用 el。
