当前位置：首页 > React

react实现计算器

2026-01-27 14:24:35React

React 实现计算器的步骤

创建 React 项目
使用 create-react-app 或 Vite 初始化项目：

npx create-react-app calculator
# 或
npm create vite@latest calculator --template react

设计组件结构
计算器通常包含以下部分：

显示区域（Display）
按钮区域（ButtonPad）
逻辑处理（Calculator）

实现显示组件
创建一个显示当前输入和结果的组件：

function Display({ value }) {
  return <div className="display">{value || "0"}</div>;
}

实现按钮组件
创建可复用的按钮组件：

function Button({ onClick, label }) {
  return (
    <button onClick={onClick} className="button">
      {label}
    </button>
  );
}

核心逻辑实现
在 Calculator 组件中处理计算逻辑：

function Calculator() {
  const [display, setDisplay] = useState("0");
  const [storedValue, setStoredValue] = useState(null);
  const [operation, setOperation] = useState(null);

  const handleNumberInput = (num) => {
    setDisplay(display === "0" ? num : display + num);
  };

  const handleOperation = (op) => {
    setStoredValue(parseFloat(display));
    setOperation(op);
    setDisplay("0");
  };

  const calculateResult = () => {
    const currentValue = parseFloat(display);
    let result;
    switch (operation) {
      case "+":
        result = storedValue + currentValue;
        break;
      case "-":
        result = storedValue - currentValue;
        break;
      case "*":
        result = storedValue * currentValue;
        break;
      case "/":
        result = storedValue / currentValue;
        break;
      default:
        return;
    }
    setDisplay(result.toString());
    setStoredValue(null);
    setOperation(null);
  };

  const clearAll = () => {
    setDisplay("0");
    setStoredValue(null);
    setOperation(null);
  };
}

完整组件渲染
将各个部分组合起来：

return (
  <div className="calculator">
    <Display value={display} />
    <div className="button-pad">
      <Button onClick={() => handleNumberInput("7")} label="7" />
      <Button onClick={() => handleNumberInput("8")} label="8" />
      <Button onClick={() => handleNumberInput("9")} label="9" />
      <Button onClick={() => handleOperation("/")} label="/" />

      <Button onClick={() => handleNumberInput("4")} label="4" />
      <Button onClick={() => handleNumberInput("5")} label="5" />
      <Button onClick={() => handleNumberInput("6")} label="6" />
      <Button onClick={() => handleOperation("*")} label="*" />

      <Button onClick={() => handleNumberInput("1")} label="1" />
      <Button onClick={() => handleNumberInput("2")} label="2" />
      <Button onClick={() => handleNumberInput("3")} label="3" />
      <Button onClick={() => handleOperation("-")} label="-" />

      <Button onClick={() => handleNumberInput("0")} label="0" />
      <Button onClick={() => setDisplay(display + ".")} label="." />
      <Button onClick={calculateResult} label="=" />
      <Button onClick={() => handleOperation("+")} label="+" />

      <Button onClick={clearAll} label="C" />
    </div>
  </div>
);

添加样式
创建 CSS 文件增强视觉效果：

.calculator {
  width: 240px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.display {
  background: #f8f8f8;
  padding: 10px;
  margin-bottom: 10px;
  text-align: right;
  font-size: 20px;
}

.button-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

.button {
  padding: 10px;
  font-size: 18px;
  border: none;
  background: #eee;
  cursor: pointer;
}

.button:hover {
  background: #ddd;
}

功能扩展建议