用 React 构建一个简单的计算器

百变鹏仔 4周前 (09-19) #CSS

文章标签计算器

介绍

在本教程中，我们将引导您使用 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 = () =&gt; {  const [input, setinput] = usestate("");  const [result, setresult] = usestate("");  const handleclick = (value) =&gt; {    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 = () =&gt; {    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")}&gt;            <p>ac</p>          </button>          <button onclick="{()"> handleclick("del")}&gt;            <p>del</p>          </button>          <button onclick="{()"> handleclick("%")}&gt;            <p>%</p>          </button>          <button onclick="{()"> handleclick("/")}&gt;            <p>÷</p>          </button>        </div>        <div classname="row-2">          <button onclick="{()"> handleclick("7")}&gt;            <p>7</p>          </button>          <button onclick="{()"> handleclick("8")}&gt;            <p>8</p>          </button>          <button onclick="{()"> handleclick("9")}&gt;            <p>9</p>          </button>          <button onclick="{()"> handleclick("*")}&gt;            <p>x</p>          </button>        </div>        <div classname="row-3">          <button onclick="{()"> handleclick("4")}&gt;            <p>4</p>          </button>          <button onclick="{()"> handleclick("5")}&gt;            <p>5</p>          </button>          <button onclick="{()"> handleclick("6")}&gt;            <p>6</p>          </button>          <button onclick="{()"> handleclick("-")}&gt;            <p>-</p>          </button>        </div>        <div classname="row-4">          <button onclick="{()"> handleclick("1")}&gt;            <p>1</p>          </button>          <button onclick="{()"> handleclick("2")}&gt;            <p>2</p>          </button>          <button onclick="{()"> handleclick("3")}&gt;            <p>3</p>          </button>          <button onclick="{()"> handleclick("+")}&gt;            <p>+</p>          </button>        </div>        <div classname="row-5">          <button id="zero-button" onclick="{()"> handleclick("0")}&gt;            <p>0</p>          </button>          <button onclick="{()"> handleclick(".")}&gt;            <p>.</p>          </button>          <button onclick="{()"> handleclick("=")}&gt;            <p>=</p>          </button>        </div>      </div>    </div>  );};export default calculator;

应用程序组件

app 组件呈现计算器组件并向应用程序添加页眉和页脚。

import calculator from "./components/calculator";import "./app.css";const app = () =&gt; {  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.gitcd calculator-reactnpm installnpm start

这将启动开发服务器并在默认网络浏览器中打开计算器。

现场演示

您可以在此处查看计算器的现场演示。

结论

这个简单的计算器项目是练习 react 技能并了解如何在 react 应用程序中管理状态和处理用户输入的绝佳方法。请随意通过添加更多高级功能（例如科学计算器模式）或集成其他功能来扩展此项目。

制作人员

作者

abhishek gurjar 是一位充满热情的 web 开发人员，专注于构建直观且响应灵敏的 web 应用程序。跟随他的旅程并在 github 上探索更多项目。

文章推荐