React 事件处理：onClick 入门指南

介绍

在 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。这是初学者常犯的一个错误。

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

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

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

Console output showing button click message

在处理函数的参数中访问 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 对象被记录下来。

Console log showing React synthetic event object

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

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，以及更多。