请解释在 React 应用中创建和处理事件的方法,并说明其与传统 DOM 事件处理的区别。
考察说明
考察对 React 事件系统基础知识的理解,包括合成事件和事件绑定方式。
回答思路
- 【回答框架 1】React 中的事件是通过 JSX 属性绑定的,例如 onClick、onChange 等,事件处理函数接收合成事件对象。
- 【回答框架 2】合成事件是 React 对原生事件的跨浏览器封装,统一了事件接口,并拥有事件委托机制。
- 【回答框架 3】React 事件处理与原生 DOM 事件的区别包括:命名使用驼峰、绑定方式为函数引用、无法通过 return false 阻止默认行为,而需调用 preventDefault。
- 【回答框架 4】事件处理中的 this 绑定需要注意,可以通过箭头函数或 bind 显式绑定。
- 【回答框架 5】React 17 及之后版本,事件委托的挂载点从 document 改为根容器,有助于多个 React 应用共存。
- 【关键点 1】事件绑定采用 JSX 属性并传入函数引用。
- 【关键点 2】合成事件提供跨浏览器一致性,并支持事件委托。
- 【关键点 3】阻止默认行为需调用 preventDefault,不能返回 false。
- 【关键点 4】处理 this 指向可使用箭头函数或 bind。
- 【易错点 1】不能直接使用 return false 来阻止默认行为,必须调用 preventDefault。
- 【易错点 2】事件函数中 this 指向可能为 undefined,需正确绑定。