资讯详情

React 事件处理（TypeScript 版）

核心概念

1. SyntheticEvent
   React 封装的跨浏览器兼容事件对象，结构与原生 Event 一致

2. 事件绑定语法

<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>)
}

类型处理技巧

1. 使用React.HTMLAttributes<T>获取 HTML 元素完整属性类型
2. 通过EventTarget类型获取事件对象具体属性
3. 自定义事件类型：

type CustomEvent = React.MouseEvent & {detail: {customData: string}
}

注意事项

1. 事件处理函数应保持纯函数特性
2. 使用e.persist()处理闭包问题
3. 表单事件需使用ChangeEvent泛型