简单易懂的 React 事件机制React 事件机制可以简单理解为用户触发事件React 执行事件处理函数如果函数中修改了状态React 会重新渲染组件。一、React 事件的基本写法React 使用驼峰命名法表示事件button onClick{handleClick}点击/button input onChange{handleChange} / form onSubmit{handleSubmit}/form常见事件包括onClick点击事件onChange内容变化事件onSubmit表单提交事件onMouseEnter鼠标进入事件onKeyDown键盘按下事件二、传入函数不要立即调用正确写法button onClick{handleClick}点击/button错误写法button onClick{handleClick()}点击/buttonhandleClick()会在组件渲染时立即执行而不是点击按钮时执行。如果需要传递参数可以使用箭头函数button onClick{() handleDelete(1)} 删除 /button三、获取事件对象事件处理函数可以接收事件对象function handleClick(event) { console.log(event.target); console.log(event.currentTarget); }其中event.target实际触发事件的元素event.currentTarget绑定事件处理函数的元素React 提供的是合成事件对象使用方式和原生事件比较相似。四、阻止默认行为可以使用preventDefault()阻止浏览器的默认行为function handleSubmit(event) { event.preventDefault(); console.log(表单提交); }完整示例function App() { function handleSubmit(event) { event.preventDefault(); console.log(提交表单); } return ( form onSubmit{handleSubmit} button typesubmit提交/button /form ); }五、阻止事件冒泡React 事件默认支持冒泡。function App() { return ( div onClick{() console.log(父元素)} button onClick{() console.log(按钮)} 点击 /button /div ); }点击按钮时会先执行按钮事件然后执行父元素事件。如果不希望事件继续冒泡可以使用function handleButtonClick(event) { event.stopPropagation(); console.log(只执行按钮事件); }六、事件中修改状态事件处理函数中可以修改组件状态import { useState } from react; function App() { const [count, setCount] useState(0); function handleClick() { setCount(count 1); } return ( button onClick{handleClick} 点击次数{count} /button ); } export default App;点击按钮后执行handleClick调用setCount状态发生变化React 重新渲染组件页面显示最新的count七、总结React 事件机制主要记住以下几点React 事件名使用驼峰命名法例如onClick。事件属性中传入函数不要立即调用函数。需要传参时可以使用箭头函数。可以通过事件对象获取触发事件的元素。使用preventDefault()阻止默认行为。使用stopPropagation()阻止事件冒泡。事件中修改状态后React 会自动重新渲染组件。
