ReactJS |簡單的 React 計算器-js教程-PHP中文網

ReactJS |簡單的 React 計算器

WBOY

發布： 2024-08-22 22:42:32

原創

477 人瀏覽過

ReactJS |Simple React Calculator

本文將引導您完成使用 ReactJS 建立強大、使用者友善的計算器的過程。我們將介紹狀態管理、事件處理和組件結構等基本概念，以使初學者可以輕鬆存取該項目，並為熟悉 React 的人提供良好的學習體驗。

項目設定

建立一個新的 React 應用程式：
首先使用 Create React App 設定一個新的 React 專案：

npx create-react-app 反應計算器
cd 反應計算器
內容_副本
謹慎使用代碼。
猛擊

啟動開發伺服器：
執行以下命令來啟動您的開發伺服器：

npm 開始
內容_副本
謹慎使用代碼。
猛擊

您的 React 應用程式可透過 http://localhost:3000/ 存取。

組件結構

我們將使用單一元件來建立我們的計算器：App.js。該元件將處理整個計算器的邏輯和渲染。

App.js（主要元件）

導入 React, { useState } from "react";
導入“./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);
讓結果;

switch (operator) {
  case "+":
    result = firstOperand + secondOperand;
    break;
  case "-":
    result = firstOperand - secondOperand;
    break;
  case "*":
    result = firstOperand * secondOperand;
    break;
  case "/":
    if (secondOperand === 0) {
      result = "Error";
    } else {
      result = firstOperand / secondOperand;
    }
    break;
  default:
    result = "Invalid Operation";
}

setDisplayValue(result.toString());
setOperator(null);
setFirstOperand(null);

登入後複製

};

// 處理清除按鈕點選的函數
const handleClearClick = () =>; {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

返回（

{/* 顯示目前值 */}
{顯示值}

  {/* Button grid for calculator functions */}
  <div className="buttons">
    <button onClick={() => handleNumberClick("7")}>7</button>
    <button onClick={() => handleNumberClick("8")}>8</button>
    <button onClick={() => handleNumberClick("9")}>9</button>
    <button onClick={() => handleOperatorClick("/")}>/</button>
    <button onClick={() => handleNumberClick("4")}>4</button>
    <button onClick={() => handleNumberClick("5")}>5</button>
    <button onClick={() => handleNumberClick("6")}>6</button>
    <button onClick={() => handleOperatorClick("*")}>*</button>
    <button onClick={() => handleNumberClick("1")}>1</button>
    <button onClick={() => handleNumberClick("2")}>2</button>
    <button onClick={() => handleNumberClick("3")}>3</button>
    <button onClick={() => handleOperatorClick("-")}>-</button>
    <button onClick={() => handleNumberClick("0")}>0</button>
    <button onClick={() => handleNumberClick(".")}>.</button>
    <button onClick={() => handleEqualsClick()}>=</button>
    <button onClick={() => handleOperatorClick("+")}>+</button>
    <button onClick={() => handleClearClick()}>C</button>
  </div>
</div>

登入後複製

);
}

匯出預設應用程式；
內容_副本
謹慎使用代碼。
JavaScript

說明

狀態管理：
我們使用 useState 掛鉤來管理計算器的狀態。 displayValue保存目前顯示的值，operator保存選擇的操作，firstOperand保存第一個輸入的數字。

事件處理：
像handleNumberClick、handleOperatorClick、handleEqualsClick和handleClearClick這樣的函數處理使用者與按鈕的互動。

成分組成：
App 元件負責計算器的邏輯和渲染，示範元件如何將功能和呈現結合。

新增樣式 (App.css)

.計算器{
顯示：flex；
彈性方向：列；
寬度：300px；
邊框：1px 實心 #ccc;
內邊距：20px；
邊框半徑：5px；
}

.顯示{
高度：50px；
背景顏色：#eee;
字體大小：24px;
文字對齊：右；
內邊距：10px；
邊框半徑：5px；
下邊距：10px;
}

.按鈕{
顯示：網格；
網格模板列：重複(4, 1fr);
網格間隙：10px；
}

按鈕{
內邊距：10px；
邊框：無；
邊框半徑：5px；
背景顏色：#f0f0f0;
字體大小：18px；
遊標：指針；
}