SuperAPI AI 工具集

react-syntax-events

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:该技能用于处理 React 中的用户交互,包括用 TypeScript 标注事件处理器、处理表单输入,以及实现键盘和鼠标交互,帮助避免常见事件处理错误。

主要能力:说明 React 合成事件系统(所有处理器收到 SyntheticEvent 而非原生 Event;React 在根容器上做事件委托;React 17+ 不再池化事件,异步回调中访问 e 是安全的;可用 e.nativeEvent 访问原生事件)。列出常用 TypeScript 事件类型,如 React.MouseEvent<T>、React.ChangeEvent<T>、React.FormEvent<T>、React.KeyboardEvent<T>、React.FocusEvent<T>、React.DragEvent<T>、React.TouchEvent<T>、React.ClipboardEvent<T>、React.WheelEvent<T>、React.PointerEvent<T>,并强调泛型参数 T 用于正确标注 e.currentTarget。还提供内联处理器、抽出的处理器、作为 props 的处理器、React.EventHandler 简写类型、向处理器传参(箭头函数与柯里化)等写法,以及 stopPropagation 与 preventDefault 的区别与决策、捕获阶段(onClickCapture)、表单事件(onChange、onSubmit)、鼠标事件、键盘事件、焦点事件等说明。

必要用法与限制:不要使用已废弃的 onKeyPress,改用 onKeyDown 或 onKeyUp;不要用 (e: any) => void;不要默认调用 e.stopPropagation();onSubmit 中应调用 e.preventDefault();始终提供元素泛型参数;不要在 async/await 或 setTimeout 中读取 e.currentTarget,应先同步取值;不要用 .bind(this, arg)。键检测用 e.key 而非已废弃的 e.keyCode。onMouseEnter/onMouseLeave 不冒泡,onMouseOver/onMouseOut 冒泡。React 的 onFocus/onBlur 会冒泡。React 19 中 ref 是普通 prop,表单可用 action 与 useActionState。

适用场景:React + TypeScript 项目中的交互、表单、键盘快捷键与焦点处理。资料还列出参考文件 references/examples.md、references/api-table.md、references/anti-patterns.md 及官方链接。具体安装或调用方式暂未提供。