React 学习笔记 -- 从入门到精通（二）：事件绑定

事件绑定Event Handling什么是事件绑定在网页中用户的各种操作点击、输入、悬停、键盘按键等都是事件。事件绑定就是告诉 React“当某个事件发生时执行这个函数”。如果你熟悉传统 HTML/JS 的事件绑定React 的方式类似但有几个关键区别!-- 传统 HTML 方式 --buttononclickhandleClick()点我/button!-- React JSX 方式 --buttononClick{handleClick}点我/button三个重要区别事件名用小驼峰onClick不是onclick传的是函数引用{handleClick}不是字符串handleClick()React 使用合成事件SyntheticEvent—— 一个跨浏览器兼容的事件封装2.1 绑定点击事件function ClickDemo() { // 方式一先定义处理函数再引用 const handleClick () { alert(按钮被点击) } return ( div {/* ✅ 正确传递函数引用 */} button onClick{handleClick}方式一/button {/* ✅ 正确直接写内联箭头函数 */} button onClick{() alert(内联写法)}方式二/button /div ) }⚠️新手最常犯的错误加了小括号()// ❌ 错误handleClick() 加了括号 立刻执行 页面加载时就弹窗了 button onClick{handleClick()}点我/button // ✅ 正确handleClick 没有括号 传递引用 点击时才执行 button onClick{handleClick}点我/button类比理解你把一把钥匙交给朋友函数引用让他需要时开门。但如果你自己先把门开了函数调用钥匙就没用了。2.2 事件对象Event Object每个事件处理函数都会自动收到一个事件对象e也常写作event里面包含了事件的详细信息function Demo() { // TypeScript 中用 React.MouseEvent 来标注类型 const handleClick (e: React.MouseEventHTMLButtonElement) { console.log(点击位置X, e.clientX) // 鼠标的 X 坐标 console.log(点击位置Y, e.clientY) // 鼠标的 Y 坐标 console.log(目标元素, e.target) // 被点击的 DOM 元素 console.log(当前元素, e.currentTarget) // 绑定事件的 DOM 元素 } const handleInput (e: React.ChangeEventHTMLInputElement) { console.log(输入的值, e.target.value) // input 当前的值 } const handleKeyDown (e: React.KeyboardEventHTMLInputElement) { console.log(按下的键, e.key) // 按键名称如 Enter、a if (e.key Enter) { console.log(用户按了回车) } } return ( div button onClick{handleClick}点击/button input onChange{handleInput} / input onKeyDown{handleKeyDown} / /div ) }TypeScript 中常用的事件类型事件类型对应事件使用场景React.MouseEventHTMLButtonElementonClick, onDoubleClick按钮/元素点击React.ChangeEventHTMLInputElementonChange输入框内容变化React.KeyboardEventHTMLInputElementonKeyDown, onKeyUp键盘事件React.FormEventHTMLFormElementonSubmit表单提交React.FocusEventHTMLInputElementonFocus, onBlur聚焦/失焦提示尖括号里面是绑定事件的 HTML 元素类型。如果你把onClick写在div上类型就是React.MouseEventHTMLDivElement。2.3 给事件处理函数传参有时候我们需要在触发事件时传一些额外的参数。这时必须用箭头函数包一层function Demo() { const handleGreet (name: string) { alert(你好${name}) } const users [张三, 李四, 王五] return ( div {users.map(name ( // ✅ 正确用箭头函数包裹点击时才调用 button key{name} onClick{() handleGreet(name)} 问候 {name} /button ))} {/* ❌ 错误加了括号就立刻执行了循环跑完页面还没渲染就弹了3次窗 */} {/* button onClick{handleGreet(张三)}问候/button */} /div ) }如果同时需要事件对象和自定义参数const handleClick (name: string, e: React.MouseEvent) { console.log(${name} 在位置 (${e.clientX}, ${e.clientY}) 被点击) } button onClick{(e) handleClick(张三, e)}点击/button // ^^^ 箭头函数自动接收事件对象 e2.4 常用事件速查表React 事件原生 HTML 等价触发时机常用场景onClickonclick鼠标单击按钮点击、链接跳转onDoubleClickondblclick鼠标双击双击操作onChangeonchange表单值变化文本输入、下拉选择onInputoninput输入实时触发实时搜索onSubmitonsubmit表单提交登录、注册表单onKeyDownonkeydown键盘按下快捷键、回车提交onKeyUponkeyup键盘松开组合键onFocusonfocus获得焦点输入框高亮onBluronblur失去焦点输入校验onMouseEnteronmouseenter鼠标移入悬停提示onMouseLeaveonmouseleave鼠标移出取消悬停效果onScrollonscroll滚动无限滚动加载记忆规律把原生事件名改成小驼峰就是 React 的事件名。onclick → onClickonmouseenter → onMouseEnter。2.5 阻止默认行为与阻止冒泡这是两个日常开发中非常常用的操作e.preventDefault()—— 阻止浏览器默认行为某些 HTML 元素有默认行为比如form提交会刷新页面a点击会跳转链接在 React 中尤其是单页应用我们通常要阻止这些默认行为function LoginForm() { const handleSubmit (e: React.FormEventHTMLFormElement) { e.preventDefault() // ← 阻止表单默认的页面刷新 // 现在可以用 JS 来处理表单数据了 const formData new FormData(e.currentTarget) const username formData.get(username) console.log(提交的用户名, username) } return ( form onSubmit{handleSubmit} input nameusername placeholder用户名 / button typesubmit登录/button /form ) }e.stopPropagation()—— 阻止事件冒泡什么是事件冒泡当你点击一个子元素时事件会沿着 DOM 树从内向外依次触发父元素上的同类事件。function BubbleDemo() { return ( div onClick{() console.log(外层 div 被点击)} {/* 点击按钮时div 的 onClick 也会触发这就是冒泡 */} button onClick{(e) { e.stopPropagation() // ← 阻止冒泡外层 div 的 onClick 不会触发 console.log(按钮被点击) }} 点我 /button /div ) }冒泡过程图解不使用 stopPropagation 时点击 button ↓ 触发 button 的 onClick ↑ 冒泡到 div触发 div 的 onClick ↑ 冒泡到 body... ↑ 冒泡到 document...