Logo

菜单

发布于 2026-01-06 0 阅读
0

如何使用 React.js 创建一个简单的计算器 Web 应用程序

如何使用 React.js 创建一个简单的计算器 Web 应用程序

在本文中，我将解释如何使用 React 创建一个简单的计算器。可能存在一些 bug，但这仅用于学习和训练 React 的基本概念。

最近我学习了 Facebook 的 React 库的主要概念，React 的简洁性和清晰度让我感到惊讶。

让我们深入了解这个项目吧！

最终项目 - 计算器应用程序

步骤 1：将 UI 分解为组件

首先，我们需要确定案例中的组件是什么。在这个例子中，我们可以看到按钮可以是一个单独的组件，那么我们需要把所有按钮组合在一起，得到键盘组件。接下来，我们看到顶部需要一个地方来显示表达式和结果，这就是显示组件。最后，我们需要把所有组件组合在一起，所以我们把最后一个组件命名为计算器，你可以随意命名，它也可以叫做应用程序组件。

成分

  1. 计算器——包含所有其他组件的主要部件
  2. 显示屏 — 包括顶部的显示区域
  3. 按钮 — 代表键盘上的每个按钮
  4. 键盘——我们将把所有按钮都放在这个组件中。

组件以方框表示。

步骤 2：在 React 中构建静态版本

先从最简单的方案入手，暂时不考虑交互和状态管理。我们只需要编写组件及其基本的渲染函数，这样开发起来会更方便。

我决定从 Button 组件开始，因为它里面没有其他组件，所以在实现父组件之前我不需要处理组合问题，当我们编写 Keypad 组件时，你就会明白我的意思了。

import React, {Component} from 'react';
import "./Button.css";

class Button extends Component {
    render(){
        return(
            <div 
                className="Button"
                onClick={this.props.onClick}
                data-size={this.props.size}
                data-value={this.props.value}>
                {this.props.label}
            </div>
        );
    }
}

export default Button;
Enter fullscreen mode Exit fullscreen mode 
.Button {
    background: #cad2c5;
    display: flex;
    border: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 25%;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.5);
    height: 20%;
    min-width: 25%;
}

.Button[data-size="2"] {
    height: 40%;
}

.Button[data-value="null"] {
    pointer-events: none;
}

.Button:hover {
    background: #d7ddd3;
    cursor: default;
}
Enter fullscreen mode Exit fullscreen mode

然后我们编写显示组件。

import React, {Component} from 'react';
import "./Display.css";

class Display extends Component {
    render(){
        return(
            <div className="Display">
                {this.props.data}
            </div>
        );
    }
}

export default Display;
Enter fullscreen mode Exit fullscreen mode 
.Display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #2b293d;
    height: 20%;
    color: #80c9c9;
    font-size: 24px;
}
Enter fullscreen mode Exit fullscreen mode

下一个组件是键盘，它使用 {this.props.children} 来渲染将要写入其中的任何内容，这可以是任何其他组件。

import React, {Component} from 'react';
import "./Keypad.css";

class Keypad extends Component {
    render(){
        return(
            <div className="Keypad">
                {/* We are using composition instead of inheritance.
                    read more: https://reactjs.org/docs/composition-vs-inheritance.html */}
                {this.props.children}
            </div>
        );
    }
}

export default Keypad;
Enter fullscreen mode Exit fullscreen mode 
.Keypad {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 80%;
}
Enter fullscreen mode Exit fullscreen mode

最后，我们将编写一个基本版本的计算器组件，这里我们只实现了 render() 函数来构建应用程序的结构，然后我们将考虑状态以及它应该放在哪里。

import React, {Component} from 'react';
import Button from './Button';
import Keypad from './Keypad';
import './Calculator.css';
import Display from './Display';

class Calculator extends Component {
    render(){
        return(
            <div className="Calculator">
                <Display data={this.state.data}/>
                <Keypad>
                    <Button label="C" value="clear" />
                    <Button label="7" value="7" />
                    <Button label="4" value="4" />
                    <Button label="1" value="1" />
                    <Button label="0" value="0" />

                    <Button label="/" value="/" />
                    <Button label="8" value="8" />
                    <Button label="5" value="5" />
                    <Button label="2" value="2" />
                    <Button label="." value="." />

                    <Button label="x" value="*" />
                    <Button label="9" value="9" />
                    <Button label="6" value="6" />
                    <Button label="3" value="3" />
                    <Button label="" value="null" />

                    <Button label="-" value="-" />
                    <Button label="+" size="2" value="+" />
                    <Button label="=" size="2" value="equal" />
                </Keypad>
            </div>
        );
    }
}

export default Calculator;
Enter fullscreen mode Exit fullscreen mode 
body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.Calculator {
    width: 400px;
    height: 300px;
    position: relative;
    margin: 25px;
}
Enter fullscreen mode Exit fullscreen mode

您还可以看到我们是如何将键盘组件与按钮组件组合使用的。

步骤 3：确定并实施州

首先，我们要问自己，哪些组件会共享状态？在本例中，是按钮组件和显示组件，它们都位于计算器组件中，所以我们将在计算器组件中实现状态。

作为状态，我们只需要一个参数，那就是通过按下按钮在显示屏上显示的数据或表达式。

这是完整的计算器组件，它包含了状态以及操作状态所需的函数。

import React, {Component} from 'react';
import Button from './Button';
import './Calculator.css';
import Display from './Display';
import Keypad from './Keypad';

class Calculator extends Component {
    constructor() {
        super();
        this.state = { data: ''}
    }

    calculate = () => {
        try {
            const result = eval(this.state.data);
            this.setState({data: result});
        } catch (e) {
            this.setState({data: 'error'})
        }
    }

    handleClick = e => {
        const value = e.target.getAttribute('data-value');
        switch(value) {
            case 'clear':
                this.setState({ data: ''});
                break;
            case 'equal':
                this.calculate();
                break;
            default:
                this.setState({ data: this.state.data + value});
        }
    }
    render(){
        return(
            <div className="Calculator">
                <Display data={this.state.data}/>
                <Keypad>
                    <Button onClick={this.handleClick} label="C" value="clear" />
                    <Button onClick={this.handleClick} label="7" value="7" />
                    <Button onClick={this.handleClick} label="4" value="4" />
                    <Button onClick={this.handleClick} label="1" value="1" />
                    <Button onClick={this.handleClick} label="0" value="0" />

                    <Button onClick={this.handleClick} label="/" value="/" />
                    <Button onClick={this.handleClick} label="8" value="8" />
                    <Button onClick={this.handleClick} label="5" value="5" />
                    <Button onClick={this.handleClick} label="2" value="2" />
                    <Button onClick={this.handleClick} label="." value="." />

                    <Button onClick={this.handleClick} label="x" value="*" />
                    <Button onClick={this.handleClick} label="9" value="9" />
                    <Button onClick={this.handleClick} label="6" value="6" />
                    <Button onClick={this.handleClick} label="3" value="3" />
                    <Button onClick={this.handleClick} label="" value="null" />

                    <Button onClick={this.handleClick} label="-" value="-" />
                    <Button onClick={this.handleClick} label="+" size="2" value="+" />
                    <Button onClick={this.handleClick} label="=" size="2" value="equal" />
                </Keypad>
            </div>
        );
    }
}

export default Calculator;
Enter fullscreen mode Exit fullscreen mode

这是一个非常简单的 React 应用示例，但我们用到了大部分主要概念，例如组件的组合、从父组件向子组件传递参数、维护和修改状态等等……

我希望我已经解释清楚了这个过程，你也可以在GitHub上查看完整的源代码。

如果您有任何建议或疑问，请在评论区留言。

感谢阅读！

文章来源：https://dev.to/gjorgiev/how-to-create-a-simple-calculator-web-app-using-react-js-4gc3
如何使用 ASP.NET Core...
实习医生格蕾 Lorem Ipsu...