React 事件处理（TypeScript 版）
核心概念
-
SyntheticEvent
React 封装的跨浏览器兼容事件对象，结构与原生 Event 一致 -
事件绑定语法
<button onClick={this.handleClick}>点击</button>
常见事件类型
| 事件类型 | 对应类型定义 |
|---|---|
| onClick | React.MouseEventHandler |
| onChange | React.ChangeEventHandler |
| onSubmit | React.FormEventHandler |
| onMouseEnter | React.MouseEventHandler |
完整示例
import React, { useState } from "react"interface CounterProps {initialCount: number
}const Counter: React.FC<CounterProps> = ({ initialCount }) => {const [count, setCount] = useState(initialCount)const increment = (e: React.MouseEvent) => {e.preventDefault()setCount(count + 1)}const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {const value = parseInt(e.target.value, 10)if (!isNaN(value)) {setCount(value)}}return (<div><h3>计数器: {count}</h3><button onClick={increment}>+1</button><inputtype="number"value={count}onChange={handleChange}onKeyDown={(e) => {if (e.key === "Enter") {console.log("当前值:", count)}}}/></div>)
}
类型处理技巧
- 使用
React.HTMLAttributes<T>获取 HTML 元素完整属性类型 - 通过
EventTarget类型获取事件对象具体属性 - 自定义事件类型：
type CustomEvent = React.MouseEvent & {detail: {customData: string}
}
注意事项
- 事件处理函数应保持纯函数特性
- 使用
e.persist()处理闭包问题 - 表单事件需使用
ChangeEvent泛型