React入门学习——指北指南（第四节）

React 交互性：事件与状态

在前面的章节中，我们探讨了 React 组件的基础。本节将聚焦 React 中实现交互性的核心机制 ——事件处理与状态管理。用户界面的交互（如点击按钮、输入文本）本质上是用户操作触发的一系列响应，而 React 通过统一的事件处理方式和状态更新机制，让这种响应变得可预测且易于维护。

React 事件处理基础

React 中的事件处理与原生 JavaScript 的事件处理类似，但存在一些语法差异。理解这些差异是实现交互的第一步。

语法差异

1. 命名规范：React 事件采用驼峰命名法（camelCase），而非原生 DOM 的全小写。例如，原生的onclick在 React 中写为onClick，onchange写为onChange。

2. 事件处理函数：在 React 中，事件处理函数通常是组件内定义的方法（或箭头函数），而非字符串。

   原生 DOM 写法：

\<button onclick="handleClick()">点击我\</button>

React 写法：

function MyButton() {&#x20; function handleClick() {&#x20;   alert('按钮被点击了！');&#x20; }&#x20; return \<button onClick={handleClick}>点击我\</button>;}

1. 阻止默认行为：在原生 JavaScript 中，常用return false阻止默认行为；而在 React 中，必须显式调用event.preventDefault()。

   例如阻止链接跳转：

function Link() {&#x20; function handleClick(event) {&#x20;   event.preventDefault(); // 阻止默认跳转行为&#x20;   alert('链接被点击，但没有跳转！');&#x20; }&#x20; return (&#x20;   \<a href="https://example.com" onClick={handleClick}>&#x20;     点击我&#x20;   \</a>&#x20; );}

事件对象

React 中的事件对象（event）是合成事件（SyntheticEvent），它是对原生 DOM 事件的跨浏览器封装，拥有与原生事件相似的属性和方法（如preventDefault()、stopPropagation()），且在所有浏览器中表现一致。

function Button() {