用 React 构建一个简单的计算器
介绍
在本教程中，我们将引导您使用 react 构建一个简单且实用的计算器。对于希望获得 react 实践经验并了解如何在 react 应用程序中管理状态和处理事件的初学者来说，该项目是一个很好的起点。
项目概况
这个计算器项目允许用户执行基本算术运算，如加法、减法、乘法和除法。该计算器具有时尚、用户友好的界面，它可以处理所有基本操作，包括清除输入、删除最后输入的值以及计算结果。
特征
- 基本算术运算：支持加减乘除。
- 清除（ac）和删除（del）功能：轻松清除所有输入或删除最后输入的数字。
- 响应式设计：适用于各种屏幕尺寸，具有直观的按钮布局。
- 错误处理：如果执行无效操作，则显示错误消息。
使用的技术
- react：用于构建用户界面。
- css：用于设计应用程序样式并确保响应式设计。
项目结构
该项目的结构如下：
├── public ├── src │ ├── components │ │ └── calculator.jsx │ ├── app.jsx │ ├── app.css │ ├── index.js │ └── index.css ├── package.json └── readme.md
关键部件
- calculator.jsx：包含计算器的主要逻辑，包括状态管理和事件处理。
- app.jsx：包装计算器组件并处理应用程序的整体布局。
- app.css：包含计算器组件的样式。
代码说明
计算器组件
计算器组件使用 usestate 挂钩管理计算器输入和结果的状态。它包括一个handleclick 函数，用于处理按钮单击并相应地更新状态。 calculateresult 函数使用 javascript 的 eval 函数评估输入并更新结果。
import { usestate } from "react";
const calculator = () => {
const [input, setinput] = usestate("");
const [result, setresult] = usestate("");
const handleclick = (value) => {
if (value === "ac") {
setinput("");
setresult("");
} else if (value === "del") {
setinput(input.slice(0, -1));
} else if (value === "=") {
setresult("")
calculateresult();
} else {
setinput(input + value);
}
};
const calculateresult = () => {
try {
setinput(eval(input));
} catch (error) {
setresult("enter valid operation");
}
};
return (
<div classname="calculator">
<div classname="output-box">
<h1>{input}</h1>
<h2>{result}</h2>
</div>
<div classname="buttons">
<div classname="row-1">
<button onclick="{()"> handleclick("ac")}>
<p>ac</p>
</button>
<button onclick="{()"> handleclick("del")}>
<p>del</p>
</button>
<button onclick="{()"> handleclick("%")}>
<p>%</p>
</button>
<button onclick="{()"> handleclick("/")}>
<p>÷</p>
</button>
</div>
<div classname="row-2">
<button onclick="{()"> handleclick("7")}>
<p>7</p>
</button>
<button onclick="{()"> handleclick("8")}>
<p>8</p>
</button>
<button onclick="{()"> handleclick("9")}>
<p>9</p>
</button>
<button onclick="{()"> handleclick("*")}>
<p>x</p>
</button>
</div>
<div classname="row-3">
<button onclick="{()"> handleclick("4")}>
<p>4</p>
</button>
<button onclick="{()"> handleclick("5")}>
<p>5</p>
</button>
<button onclick="{()"> handleclick("6")}>
<p>6</p>
</button>
<button onclick="{()"> handleclick("-")}>
<p>-</p>
</button>
</div>
<div classname="row-4">
<button onclick="{()"> handleclick("1")}>
<p>1</p>
</button>
<button onclick="{()"> handleclick("2")}>
<p>2</p>
</button>
<button onclick="{()"> handleclick("3")}>
<p>3</p>
</button>
<button onclick="{()"> handleclick("+")}>
<p>+</p>
</button>
</div>
<div classname="row-5">
<button id="zero-button" onclick="{()"> handleclick("0")}>
<p>0</p>
</button>
<button onclick="{()"> handleclick(".")}>
<p>.</p>
</button>
<button onclick="{()"> handleclick("=")}>
<p>=</p>
</button>
</div>
</div>
</div>
);
};
export default calculator;
应用程序组件
app 组件呈现计算器组件并向应用程序添加页眉和页脚。
import calculator from "./components/calculator"; import "./app.css"; const app = () => { return ( <div classname="app"> <div classname="header"> <h1>calculator</h1> </div> <calculator></calculator><div classname="footer"> <p>made with ❤️ by coding4dev</p> </div> </div> ); }; export default app;
css 样式
css 样式确保计算器位于屏幕中央并具有现代外观。按钮的风格简洁且响应灵敏。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.app {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header {
margin: 20px;
}
.calculator {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 350px;
height: 450px;
color: white;
background-color: black;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.output-box {
width: 300px;
height: 100px;
color: rgb(53, 52, 52);
background-color: rgb(216, 216, 216);
border-radius: 12px;
}
.output-box h1 {
margin-left: 15px;
font-size: 25px;
overflow: hidden;
}
.output-box h2 {
margin-left: 15px;
font-size: 25px;
}
.buttons {
margin-top: 15px;
width: 350px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.buttons p {
font-size: 14px;
font-weight: 600;
color: white;
}
button {
width: 72px;
margin: 4px;
border-radius: 12px;
border: none;
background-color: #536493;
}
button:hover {
background-color: #374262;
}
#zero-button {
width: 150px;
}
.footer {
margin: 20px;
}
安装与使用
要开始此项目，请克隆存储库并安装依赖项：
git clone https://github.com/abhishekgurjar-in/Calculator.git cd calculator-react npm install npm start
这将启动开发服务器并在默认网络浏览器中打开计算器。
现场演示
您可以在此处查看计算器的现场演示。
结论
这个简单的计算器项目是练习 react 技能并了解如何在 react 应用程序中管理状态和处理用户输入的绝佳方法。请随意通过添加更多高级功能（例如科学计算器模式）或集成其他功能来扩展此项目。
制作人员
- 灵感：这个项目的灵感来自于在线提供的各种简单计算器。
作者
abhishek gurjar 是一位充满热情的 web 开发人员，专注于构建直观且响应灵敏的 web 应用程序。跟随他的旅程并在 github 上探索更多项目。
以上就是用 React 构建一个简单的计算器的详细内容，更多请关注其它相关文章！