ReactJS |简单的 React 计算器

本文将指导您完成使用 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这样的函数处理用户与按钮的交互。

成分组成：
App 组件负责计算器的逻辑和渲染，演示组件如何将功能和呈现结合起来。

添加样式（App.css）

.计算器 {
显示：弯曲；
弹性方向：列；
宽度：300px；
边框：1px实线#ccc；
内边距：20px；
边框半径：5px；
}

.显示{
高度：50px；
背景颜色：#eee;
字体大小：24px；
文本对齐：右；
内边距：10px；
边框半径：5px；
下边距：10px；
}

.按钮{
显示：网格；
网格模板列：重复(4, 1fr);
网格间隙：10px；
}

按钮{
内边距：10px；
边框：无；
边框半径：5px；
背景颜色：#f0f0f0;
字体大小：18px；
光标：指针；
}

按钮：悬停{
背景颜色：#ddd;
}
内容_副本
谨慎使用代码。
CSS

结论

通过执行以下步骤，您已经使用 React 创建了一个功能齐全的计算器！该项目为进一步探索 React 的功能奠定了良好的基础。您现在可以添加高级操作、内存功能甚至视觉主题等功能。尝试并享受乐趣！

以上是ReactJS |简单的 React 计算器的详细内容。更多信息请关注PHP中文网其他相关文章！