React从基础入门到高级实战：React 基础入门 - 状态与事件处理

状态与事件处理

引言

在上一篇文章《JSX 与组件基础》中，我们学习了如何使用 JSX 编写 UI 结构，并通过组件化开发构建可复用的界面。本文将进一步探讨 React 的核心特性——状态（State） 和 事件处理（Event Handling）。状态让组件能够管理动态数据，而事件处理则让组件能够响应用户的操作，比如点击按钮或输入文字。

通过这篇文章，你将掌握如何使用 React 的 useState Hook 添加状态，以及如何绑定事件处理函数来实现交互功能。我们会用简单的例子和实践任务带你一步步入门，适合初学者和希望深入理解 React 的开发者。

---

1. 什么是状态（State）？

状态是 React 组件中用于存储和管理动态数据的一种机制。当状态发生变化时，React 会自动重新渲染组件，更新界面。

通俗比喻：
状态就像组件的“记忆”，它记住了一些随时可能改变的信息，比如用户的输入、计数器的数字等。当“记忆”更新时，界面也会跟着刷新。

1.1 状态与 Props 的区别

• Props：由父组件传递给子组件的数据，只读不可变。
• State：组件内部自己管理的数据，可以通过特定方式更新。

---

2. 使用 useState Hook

在现代 React 中，我们使用 useState Hook 来为函数组件添加状态。useState 是一个内置的 Hook，返回一个状态变量和一个更新函数。

2.1 基本用法

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

• useState(0)：初始化状态为 0。
• count：当前状态值。
• setCount：更新状态的函数。
• 点击按钮时，setCount 更新 count，React 重新渲染组件。

2.2 更新状态的注意事项

• 不可直接修改状态：不要用 count = count + 1，必须用 setCount。
• 状态更新是异步的：调用 setCount 后，count 不会立刻改变。

---

3. 事件处理基础

React 的事件处理与原生 JavaScript 类似，但使用 JSX 语法绑定事件处理函数。事件名称采用 camelCase（如 onClick），处理函数通常是箭头函数或普通函数。

3.1 绑定事件

示例：

function Button() {
  const handleClick = () => {
    alert('按钮被点击了！');
  };

  return <button onClick={handleClick}>点击我</button>;
}

• onClick={handleClick}：绑定点击事件。
• 点击按钮时，handleClick 函数执行。

3.2 事件对象

事件处理函数可以接收事件对象（event），用于访问事件相关信息。

示例：

function Input() {
  const handleChange = (event) => {
    console.log('输入内容：', event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
}

• onChange：监听输入变化。
• event.target.value：获取输入框的值。

---

4. 结合状态与事件

状态和事件通常一起使用，实现动态交互功能。以下是一个计数器示例，展示如何结合两者。

4.1 计数器示例

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h2>计数器: {count}</h2>
      <button onClick={increment}>加 1</button>
      <button onClick={decrement}>减 1</button>
    </div>
  );
}

• 点击“加 1”按钮，count 增加。
• 点击“减 1”按钮，count 减少。

4.2 输入框示例

import React, { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>你输入的名字是: {name}</p>
    </div>
  );
}

• 输入内容时，name 状态更新，界面同步显示。

---

5. 实践：待办事项列表

让我们通过一个简单的待办事项（Todo List）应用，综合运用状态和事件处理。

5.1 代码实现

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, inputValue]);
      setInputValue(''); // 清空输入框
    }
  };

  return (
    <div>
      <h1>待办事项</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTodo}>添加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

• todos：存储待办事项的数组。
• inputValue：输入框的值。
• handleAddTodo：添加新事项到列表。

5.2 运行项目

将以上代码放入 src/App.jsx，运行 npm run dev，即可体验添加待办事项的功能。

---

6. 调试技巧

• 检查状态更新：用 console.log 打印状态值，确认是否正确更新。
• 事件未触发：检查事件绑定是否正确（如 onClick 而不是 onclick）。
• React Developer Tools：查看状态变化，定位问题。

示例：

const [count, setCount] = useState(0);
console.log('当前count:', count);

---

7. 小练习

动手实践是学习的最佳方式！试试以下练习：

1. 修改计数器，添加一个“重置”按钮，将计数器归零。
2. 在待办事项列表中，添加一个“删除”按钮，移除特定事项。
3. 创建一个开关按钮，点击时在“开”和“关”之间切换，并显示当前状态。

提示：

• 删除事项时，使用 filter 方法更新数组。
• 开关状态可以用布尔值（true/false）管理。

---

8. 总结与预告

本篇教程介绍了 React 中的状态管理和事件处理，帮助你掌握 useState Hook 和事件绑定的基础。通过实践，你已经能够构建简单的交互式组件。

下一篇文章将探讨 React 中的列表渲染与条件渲染，带你学习如何高效渲染动态列表并根据条件显示内容。敬请期待！

---

小贴士：

• 状态更新时，避免直接修改原始数据，使用扩展运算符（...）或新值。
• 事件处理函数命名时，使用 handle 前缀是个好习惯（如 handleClick）。

---

希望这篇文章为你解锁了 React 的动态交互能力！有任何疑问，欢迎交流，一起成长！