React 事件处理

介绍

在 Web 开发中，事件处理是指响应用户操作（如点击、按键或鼠标移动）的过程。React 提供了一种简单且声明式的方式来处理这些事件，使你的应用程序更具交互性。

React 的事件系统是对浏览器原生事件系统的封装。事件名称使用 camelCase（驼峰式命名），例如 onClick 而不是 onclick。你需要传递一个函数作为事件处理器，而不是一个字符串。

在本实验中，你将学习 React 中事件处理的基础知识。你将从一个简单的按钮开始，逐步添加功能来处理点击事件、访问事件数据以及控制默认的浏览器行为。

在本实验结束时，你将能够：

• 将一个 onClick 事件处理器附加到按钮上。
• 在组件内定义一个处理器函数。
• 正确地将处理器函数传递给事件属性。
• 访问 event 对象以获取有关事件的信息。
• 使用 event.preventDefault() 来阻止默认的浏览器行为。

为 button 元素添加 onClick 属性

在本步骤中，你将首先设置开发环境，然后为 button 元素添加一个 onClick 属性。这是让 React 中的元素具有交互性的第一步。

首先，让我们导航到项目目录，安装必要的依赖项，并启动开发服务器。

在 WebIDE 中打开终端并依次运行以下命令：

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

运行 npm run dev 后，你将看到表明开发服务器正在运行的输出。现在，你可以通过切换到 LabEx 界面中的 Web 8080 标签页来查看你的应用程序。你应该会看到一个简单的 "Click me" 按钮。

现在，让我们添加事件处理器。从 WebIDE 左侧的文件浏览器中打开 src/App.jsx 文件。

你的 src/App.jsx 文件目前如下所示：

function App() {
  return <button>Click me</button>;
}

export default App;

要响应点击事件，你需要为 <button> 元素添加 onClick 属性。在 React 中，事件属性使用 camelCase（驼峰式命名）。目前，我们将向其传递一个空的内联箭头函数。

按如下方式修改 src/App.jsx 中的 <button> 元素：

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

保存文件。尽管点击按钮目前不会有任何可见的变化，但你已成功为其附加了一个事件监听器。

在组件内定义处理函数

在本步骤中，你将在组件内定义一个专门的函数来处理点击事件。这是一种常见的做法，可以保持你的 JSX 整洁，并使你的逻辑更有条理。

与其直接在 JSX 的 onClick 属性中编写逻辑，不如定义一个单独的函数。让我们创建一个名为 handleClick 的函数。

在你的 src/App.jsx 文件中，在 return 语句之前，在 App 组件内部定义 handleClick 函数。目前，这个函数只会向控制台记录一条消息。

使用以下代码更新你的 src/App.jsx 文件：

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={() => {}}>Click me</button>;
}

export default App;

此时，你已经定义了 handleClick 函数，但它尚未连接到按钮的 onClick 事件。在下一步中，你将学习如何将此函数传递给 onClick 属性。

将处理函数作为 onClick 的值传递（不带括号）

在本步骤中，你将把之前定义的 handleClick 函数连接到按钮的 onClick 事件。非常重要的是要传递函数引用本身，而不是调用函数的返回值。

要将你的 handleClick 函数用作事件处理器，你需要将其放在花括号 {} 内传递给 onClick 属性。

修改 src/App.jsx 中的 <button> 元素，将 handleClick 传递给 onClick：

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

请注意，我们写的是 onClick={handleClick}，而不是 onClick={handleClick()}。

• onClick={handleClick} 传递的是函数本身。React 会在按钮被点击时调用这个函数。
• onClick={handleClick()} 会在组件渲染时立即调用该函数，并将函数的返回值（即 undefined）传递给 onClick。这是初学者常犯的一个错误。

现在，让我们来测试一下。

1. 保存 src/App.jsx 文件。
2. 切换到 Web 8080 标签页。
3. 打开浏览器的开发者控制台。你可以通过右键单击页面，选择 "Inspect"（检查），然后点击 "Console"（控制台）标签页来完成此操作。
4. 点击 "Click me" 按钮。

每次点击按钮时，你应该会在控制台中看到消息 "Button was clicked!"。

在处理函数的参数中访问 event 对象

在本步骤中，你将学习如何访问 React 自动传递给事件处理器的事件对象。这个对象包含了关于用户交互的有用信息。

React 将一个“合成事件”（synthetic event）对象作为第一个参数传递给每个事件处理器。这个对象是对浏览器原生事件的跨浏览器封装，提供了一致的 API。

要访问它，你需要为你的 handleClick 函数添加一个参数。通常将其命名为 event 或 e。让我们修改函数以接受此参数并将其记录到控制台。

更新你的 src/App.jsx 文件：

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

现在，保存文件并返回 Web 8080 标签页。确保你的开发者控制台仍然打开。当你点击按钮时，你将不再看到一个简单的字符串。相反，你将在控制台中看到一个 SyntheticBaseEvent 对象被记录下来。

你可以在控制台中展开此对象来检查其属性。例如，你可以找到：

• event.type: 事件的类型（例如 "click"）。
• event.target: 触发事件的 DOM 元素（即 <button>）。

这个事件对象功能强大，它允许你读取信息并控制事件的行为。

使用 event.preventDefault() 阻止默认行为

在本步骤中，你将学习如何阻止与事件相关的默认浏览器行为。这是一个常见的需求，尤其是在处理表单提交时。

某些浏览器事件具有默认操作。例如，点击链接会导航到新页面，而点击 <form> 内的提交按钮会提交表单，这通常会导致页面重新加载。

为了演示这一点，让我们将按钮包裹在 <form> 元素中。默认情况下，点击表单内的按钮会触发表单提交。

更新你的 src/App.jsx 以包含 <form> 标签：

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

如果你现在保存并点击按钮，你会注意到页面重新加载了，并且你可能会短暂地看到控制台日志，然后它就消失了。这就是表单的默认提交行为。

要阻止这种情况，你可以在处理器中调用 event.preventDefault()。此方法告诉浏览器不要执行其默认操作。

修改 handleClick 函数以调用 event.preventDefault()：

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

保存文件并重试。现在当你点击 Web 8080 标签页中的按钮时，页面将不会重新加载。你将在控制台中持续看到消息 "Form submission prevented!"。你已成功控制了事件的行为。

总结

恭喜你完成了本次实验！你已经掌握了 React 中事件处理的基础概念。

在本次实验中，你练习了如何：

• 在 JSX 中使用 onClick 属性来监听用户点击事件。
• 在组件内部定义事件处理器函数，以保持代码的组织性。
• 正确地将函数引用传递给事件处理器 prop，避免在渲染时调用函数的常见陷阱。
• 访问 React 提供的合成事件对象，其中包含关于用户交互的宝贵信息。
• 使用 event.preventDefault() 来阻止浏览器的默认操作，从而完全控制用户体验。

这些技能对于使用 React 构建交互式和动态的用户界面至关重要。你可以将这些相同的原则应用于处理其他事件，如用于输入的 onChange，用于悬停效果的 onMouseOver，以及更多。