反应JS | 计算器应用程序(构建 UI)

本文介绍如何使用 React.js 构建一个计算器应用程序的前端 UI。

前提条件

本指南假设您已经具备以下技能和知识：

• 基础的 React.js 知识
• HTML/CSS 知识
• JavaScript 知识

开始构建 UI

步骤 1：创建 React 应用程序

首先，您需要创建一个新的 React 应用程序。您可以使用以下命令来创建一个新项目：

npx create-react-app calculator

该命令将在名为 "calculator" 的新目录中创建一个全新的 React 应用程序。

步骤 2：添加所需的依赖项

接下来，您需要添加所需的依赖项。为了创建计算器 UI，您将需要使用以下依赖项：

• react
• react-dom
• react-scripts

您可以使用以下命令来安装这些依赖项：

npm install react react-dom react-scripts

步骤 3：创建 UI 组件

接下来，您需要创建 UI 组件。在这个例子中，我们将创建一个名为 "Calculator" 的组件，该组件将显示一个具有数字按钮和操作按钮的网格，并将显示当前计算结果。

import React from 'react';

class Calculator extends React.Component {
  render() {
    return (
      <div className="calculator">
        <div className="display">{this.props.value}</div>
        <div className="buttons">
          <div className="row">
            <button onClick={() => this.props.onClick("7")}>7</button>
            <button onClick={() => this.props.onClick("8")}>8</button>
            <button onClick={() => this.props.onClick("9")}>9</button>
            <button onClick={() => this.props.onClick("/")}>/</button>
          </div>
          <div className="row">
            <button onClick={() => this.props.onClick("4")}>4</button>
            <button onClick={() => this.props.onClick("5")}>5</button>
            <button onClick={() => this.props.onClick("6")}>6</button>
            <button onClick={() => this.props.onClick("*")}>*</button>
          </div>
          <div className="row">
            <button onClick={() => this.props.onClick("1")}>1</button>
            <button onClick={() => this.props.onClick("2")}>2</button>
            <button onClick={() => this.props.onClick("3")}>3</button>
            <button onClick={() => this.props.onClick("-")}>-</button>
          </div>
          <div className="row">
            <button onClick={() => this.props.onClick("0")}>0</button>
            <button onClick={() => this.props.onClick(".")}>.</button>
            <button onClick={() => this.props.onClick("+")}>+</button>
            <button onClick={() => this.props.onClick("=")}>=</button>
          </div>
        </div>
      </div>
    );
  }
}

export default Calculator;

步骤 4：创建父组件

现在，我们需要创建父组件来 render Calculator 组件并处理计算逻辑。在这个例子中，我们将创建名为 "App" 的父组件。

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '0',
      operator: null,
      waitingForOperand: false
    };
  }

  handleButtonClick = (buttonValue) => {
    const { value, operator, waitingForOperand } = this.state;
    switch (buttonValue) {
      case 'C':
        this.setState({ value: '0', operator: null, waitingForOperand: false });
        break;

      case '=':
        if (operator === null) {
          return;
        }
        let newValue;
        switch (operator) {
          case '+':
            newValue = parseFloat(value) + parseFloat(this.state.value);
            break;

          case '-':
            newValue = parseFloat(value) - parseFloat(this.state.value);
            break;

          case '*':
            newValue = parseFloat(value) * parseFloat(this.state.value);
            break;

          case '/':
            newValue = parseFloat(value) / parseFloat(this.state.value);
            break;

          default:
            break;
        }
        this.setState({ value: newValue.toString(), operator: null, waitingForOperand: false });
        break;

      case '+':
      case '-':
      case '*':
      case '/':
        this.setState({ operator: buttonValue, waitingForOperand: true });
        break;

      default:
        const inputValue = buttonValue;
        if (waitingForOperand) {
          this.setState({ value: inputValue, waitingForOperand: false });
        } else {
          this.setState({ value: (value === '0' ? inputValue : value + inputValue)});
        }
        break;
    }
  };

  render() {
    return (
      <div className="app">
        <Calculator value={this.state.value} onClick={this.handleButtonClick} />
      </div>
    );
  }
}

export default App;

通过调用 handleButtonClick 函数来处理按钮点击事件并更新组件的状态值。该函数将检查按钮值并执行相应的计算操作或更新当前显示的值。

步骤 5：渲染父组件

最后，我们需要将父组件渲染到页面上。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

结论

现在，您已经学会使用 React.js 构建计算器 UI。您可以尝试修改代码并添加自己的样式以创建自定义的计算器界面。