插件窝干货文章用 React 构建一个简单的计算器

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

gt button lt handleclick 816 来源： 2024-10-21

介绍

在本教程中，我们将引导您使用 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 = () =&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(null, -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(null, 0, 0, 0.35) 0px 5px 15px;
}
.output-box {
  width: 300px;
  height: 100px;
  color: rgb(null, 52, 52);
  background-color: rgb(null, 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 上探索更多项目。

上一篇：日状态和生命周期方法 - ReactJS

下一篇：带有媒体查询的响应式网页设计