React入门学习——指北指南（第四节）
React 交互性：事件与状态
在前面的章节中，我们探讨了 React 组件的基础。本节将聚焦 React 中实现交互性的核心机制 ——事件处理与状态管理。用户界面的交互（如点击按钮、输入文本）本质上是用户操作触发的一系列响应，而 React 通过统一的事件处理方式和状态更新机制，让这种响应变得可预测且易于维护。
React 事件处理基础
React 中的事件处理与原生 JavaScript 的事件处理类似，但存在一些语法差异。理解这些差异是实现交互的第一步。
语法差异
-
命名规范：React 事件采用驼峰命名法（camelCase），而非原生 DOM 的全小写。例如，原生的
onclick在 React 中写为onClick，onchange写为onChange。 -
事件处理函数：在 React 中，事件处理函数通常是组件内定义的方法（或箭头函数），而非字符串。
原生 DOM 写法：
\<button onclick="handleClick()">点击我\</button>
React 写法：
function MyButton() {  function handleClick() {  alert('按钮被点击了！');  }  return \<button onClick={handleClick}>点击我\</button>;}
-
阻止默认行为：在原生 JavaScript 中，常用
return false阻止默认行为；而在 React 中，必须显式调用event.preventDefault()。例如阻止链接跳转：
function Link() {  function handleClick(event) {  event.preventDefault(); // 阻止默认跳转行为  alert('链接被点击，但没有跳转！');  }  return (  \<a href="https://example.com" onClick={handleClick}>  点击我  \</a>  );}
事件对象
React 中的事件对象（event）是合成事件（SyntheticEvent），它是对原生 DOM 事件的跨浏览器封装，拥有与原生事件相似的属性和方法（如preventDefault()、stopPropagation()），且在所有浏览器中表现一致。
function Button() {