ReactJS |简单的 React 计算器-js教程-PHP中文网

ReactJS |Simple React Calculator

本文将指导您完成使用 ReactJS 创建功能强大、用户友好的计算器的过程。我们将介绍状态管理、事件处理和组件结构等基本概念，以使初学者可以轻松访问该项目，并为熟悉 React 的人提供良好的学习体验。

项目设置

创建一个新的 React 应用程序：
首先使用 Create React App 设置一个新的 React 项目：

npx create-react-app 反应计算器
cd 反应计算器
内容_副本
谨慎使用代码。
重击

启动开发服务器：
运行以下命令来启动您的开发服务器：

npm 开始
内容_副本
谨慎使用代码。
重击

您的 React 应用程序可通过 http://localhost:3000/ 访问。

组件结构

我们将使用单个组件构建我们的计算器：App.js。该组件将处理整个计算器的逻辑和渲染。

App.js（主要组件）

从“react”导入 React, { useState };
导入“./App.css”；

函数 App() {
const [displayValue, setDisplayValue] = useState("0");
const [operator, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// 处理数字按钮点击的函数
const handleNumberClick = (number) =>; {
if (displayValue === "0") {
setDisplayValue(number.toString());
}其他{
setDisplayValue(displayValue + number.toString());
}
};

// 处理操作员按钮点击的函数
const handleOperatorClick = (op) =>; {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// 处理等于按钮点击的函数
const handleEqualsClick = () =>; {
const secondaryOperand = parseFloat(displayValue);
让结果；

雷雷

}；

// 处理清除按钮点击的函数
const handleClearClick = () =>; {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

返回（

{/* 显示当前值 */}
{显示值} 雷雷

）；
}

导出默认App；
内容_副本
谨慎使用代码。
JavaScript

解释

状态管理：
我们使用 useState 挂钩来管理计算器的状态。 displayValue保存当前显示的值，operator保存选择的操作，firstOperand保存第一个输入的数字。

事件处理：
像handleNumberClick、handleOperatorClick、handleEqualsClick和handleClearClick这样的函数处理用户与按钮的交互。