用 React 实现计算器：手把手带你完成一个小项目

2024-02-19 05:26:13

前言

计算器是我们日常生活中不可或缺的工具，它可以帮助我们轻松地进行数学运算。在本文中，我们将使用 React 来构建一个计算器。该计算器将具有基本的功能，包括加、减、乘、除和清除。我们将一步步地实现这个计算器，从创建 React 应用程序到处理用户输入和显示结果。

创建 React 应用程序

首先，我们需要创建一个新的 React 应用程序。我们可以使用以下命令来完成：

npx create-react-app calculator

这将创建一个名为 "calculator" 的新目录。接下来，我们需要进入这个目录：

cd calculator

然后，我们需要安装必要的依赖项：

npm install

这将安装所有必需的依赖项，包括 React、ReactDOM 和 Babel。

编写 React 组件

接下来，我们需要编写 React 组件。我们将创建一个名为 "Calculator" 的组件，它将包含计算器的所有功能。我们将使用函数式组件，因为它更简单、更易于编写。

import React, { useState } from "react";

const Calculator = () => {
  const [result, setResult] = useState("");

  const handleClick = (e) => {
    const value = e.target.value;

    if (value === "=") {
      try {
        const result = eval(result);
        setResult(result);
      } catch (error) {
        setResult("Error");
      }
    } else if (value === "AC") {
      setResult("");
    } else {
      setResult(result + value);
    }
  };

  return (
    <div>
      <input type="text" value={result} readOnly />
      <button onClick={handleClick} value="7">7</button>
      <button onClick={handleClick} value="8">8</button>
      <button onClick={handleClick} value="9">9</button>
      <button onClick={handleClick} value="+">+</button>
      <button onClick={handleClick} value="4">4</button>
      <button onClick={handleClick} value="5">5</button>
      <button onClick={handleClick} value="6">6</button>
      <button onClick={handleClick} value="-">-</button>
      <button onClick={handleClick} value="1">1</button>
      <button onClick={handleClick} value="2">2</button>
      <button onClick={handleClick} value="3">3</button>
      <button onClick={handleClick} value="*">*</button>
      <button onClick={handleClick} value=".">.</button>
      <button onClick={handleClick} value="0">0</button>
      <button onClick={handleClick} value="/">/</button>
      <button onClick={handleClick} value="AC">AC</button>
      <button onClick={handleClick} value="=">=</button>
    </div>
  );
};

export default Calculator;

这个组件包含了一个状态变量 "result"，它存储了计算结果。当用户点击按钮时，"handleClick" 函数会被调用，它将更新 "result" 状态变量。

渲染 React 组件

接下来，我们需要在我们的 React 应用程序中渲染这个组件。我们将创建一个名为 "App.js" 的文件，它将包含以下代码：

import React from "react";
import Calculator from "./Calculator";

const App = () => {
  return (
    <div>
      <h1>Calculator</h1>
      <Calculator />
    </div>
  );
};

export default App;