介绍

  • 4 分钟

若要创建交互式应用程序，你需要能够修改数据并响应用户请求。 在 React 中，此功能通过状态和事件进行管理。

状态是可在整个应用程序的组件之间进行更新和共享的数据。 事件使你可以处理用户可与应用程序交互的所有方式：单击、键入和点击。

目标

本模块介绍了以下内容：

  • 向应用程序添加状态。
  • 添加事件处理程序。
  • 使用效果挂钩来响应状态更改。

先决条件

  • JavaScript、HTML 和 CSS 的知识
  • 基本了解 React 组件
  • 代码编辑器，如 Visual Studio Code
  • 已在本地安装 Node.js
  • 已在本地安装 Git
  • 下一节中所述的初学者项目

克隆项目

此模块使用初学者项目。 克隆项目并在 Visual Studio Code 中打开它。

  1. 若要获取初学者项目，请在命令窗口或终端窗口中运行以下步骤。 此步骤将克隆存储库，并在 Visual Studio Code 中打开初学者文件夹。

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. 在 Visual Studio Code 中选择“视图”>“终端”，打开集成终端 。 或选择 Ctrl+`。 （在 Mac 上，选择 Cmd+`。）

  3. 在终端中运行以下代码，安装所需的包并启动开发服务器。

    npm install
npm start

  4. 默认浏览器应会自动打开。 如果没有，请打开浏览器，转到 http://locahost:8080. 随即将打开“初学者”页。