本文將引導您完成使用 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；
遊標：指針；
}
按鈕：懸停{
背景顏色：#ddd;
}
內容_副本
謹慎使用代碼。
CSS
結論
按照這些步驟，您已經使用 React 建立了一個功能齊全的計算器！該專案為進一步探索 React 的功能奠定了良好的基礎。現在您可以添加高級操作、記憶體功能甚至視覺主題等功能。嘗試並享受樂趣！
以上是ReactJS |簡單的 React 計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
