在本教程中,我们将引导您使用 React 构建一个简单且实用的计算器。对于希望获得 React 实践经验并了解如何在 React 应用程序中管理状态和处理事件的初学者来说,该项目是一个很好的起点。
这个计算器项目允许用户执行基本算术运算,如加法、减法、乘法和除法。该计算器具有时尚、用户友好的界面,它可以处理所有基本操作,包括清除输入、删除最后输入的值以及计算结果。
该项目的结构如下:
├── public ├── src │ ├── components │ │ └── Calculator.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
计算器组件使用 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 /> <div className="footer"> <p>Made with ❤️ by Coding4Dev</p> </div> </div> ); }; export default App;
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 构建一个简单的计算器的详细内容。更多信息请关注PHP中文网其他相关文章!