使用React实现一个简单计算器

最新推荐文章于 2024-01-08 14:24:03 发布

风吹行舟

最新推荐文章于 2024-01-08 14:24:03 发布

阅读量2.1k

点赞数 5

CC 4.0 BY-SA版权

文章标签： react html

本文链接：https://blog.csdn.net/qq_43717065/article/details/108520762

本文介绍了一个使用React构建的简单计算器应用程序，包括输入按钮、文本显示组件和核心计算逻辑。通过按钮组件进行数字和运算符的输入，显示组件实时更新计算过程和结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用React实现一个简单的计算器代码
实现效果：

在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  <script type="text/babel" src="../src/input-button.js"></script>
  </body>
</html>

input-button.js 按钮组件

import React, { Component } from 'react';
import PropTypes from 'prop-types'

class inButton extends Component{
    static propTypes={
        className: PropTypes.string
    }
    static defaultProps={
        className:"same_size"
    }
    render() {
        return <input
            type="button"
            className={this.props.className}
            value={this.props.value} />
    }
}
export default inButton

input-text.js 显示组件

import React, { Component } from 'react';

class inText extends Component{
    render() {
        return <input type="text" id="content" value={this.props.value} readOnly={true}/>
    }
}
export default inText

App.js

import React, { Component } from 'react';
import Button from './input-button'
import Text from './input-text'

class App extends Component {
    constructor() {
        super();
        this.state={
            string:""
        }
    }
    handleButton(e){
        if (e.target.value!==undefined){
            let instring=e.target.value;
            let prvcontent=this.state.string;
            let content="";
            if (instring==="+"||instring==="-"||instring==="*"||instring==="/"){
                content=prvcontent+" "+instring+" ";
            }
            else if (instring==="附加"){
                content="功能未开放";
            }
            else if (instring==="C"){
                content="";
            }
            else if (instring==="Back"){
                if(prvcontent[prvcontent.length-1]===" " && prvcontent[prvcontent.length-3]===" ")
                    prvcontent=prvcontent.slice(0,prvcontent.length-3);
                else
                    prvcontent=prvcontent.slice(0,prvcontent.length-1);
                content=prvcontent;
            }
            else if (instring==="="){
                let arr=prvcontent.split(" ");
                let ans=[];
                let i=0;
                while (i<arr.length){
                    if (arr[i]==="")
                        i++;
                    else if (arr[i]==="+"){
                        ans.push(arr[i+1]);
                        i+=2;
                    }
                    else if (arr[i]==="-"){
                        ans.push(-arr[i+1]);
                        i+=2;
                    }
                    else if (arr[i]==="*"){
                        let a;
                        let b=ans.pop();
                        if(arr[i+1]==="-"){
                            a=-arr[i+2];
                            i+=3;
                        }
                        else {
                            a=arr[i+1];
                            i+=2;
                        }
                        ans.push(b*a);
                    }
                    else if (arr[i]==="/"){
                        let a;
                        let b=ans.pop();
                        if (arr[i+1]==="0"){
                            content="ERROR!";
                            return;
                        }
                        else if(arr[i+1]==="-"){
                            a=-arr[i+2];
                            i+=3;
                        }
                        else {
                            a=arr[i+1];
                            i+=2;
                        }
                        ans.push(b/a);
                    }
                    else {
                        ans.push(arr[i]);
                        i++;
                    }

                }
                // console.log(ans);
                let fin_ans=parseFloat(ans[0]);
                for (i=1;i<ans.length;i++)
                    fin_ans+=parseFloat(ans[i]);
                content=prvcontent+instring+fin_ans;
            }
            else{
                content=prvcontent+instring;
            }
            this.setState({
                string:content
            })
        }
    }
    render() {
        return (
            <div id="main">
                <div id="input_text">
                    <Text value={this.state.string}/>
                </div>
                <div id="input_button" onClick={this.handleButton.bind(this)}>//设置事件代理
                    <Button value={1}/>
                    <Button value={2}/>
                    <Button value={3}/>
                    <Button value={"Back"}/>
                    <Button value={"C"}/>
                    <Button value={4}/>
                    <Button value={5}/>
                    <Button value={6}/>
                    <Button value={"+"}/>
                    <Button value={"-"}/>
                    <Button value={7}/>
                    <Button value={8}/>
                    <Button value={9}/>
                    <Button value={"*"}/>
                    <Button value={"/"}/>
                    <Button value={"附加"}/>
                    <Button value={0}/>
                    <Button value={"."}/>
                    <Button value={"="} className={"equal_size"}/>
                </div>
            </div>
        )
    }



}
export default App

index.js

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


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

index.css

#main{
    border: 1px solid black;
    margin: 1vw auto;
    width: 45vw;
    height: 30vw;
}

#input_text{
    /*border: 1px solid red;*/
    margin: 3% 4%;
    width: 92%;
    height: 14%;
    display: flex;
}
#input_button{
    /*border: 1px solid black;*/
    margin: 3% 2%;
    width: 96%;
    height: 74%;
    display: flex;
    flex-wrap: wrap;
}

#input_text #content{
    flex: auto;
    margin: 0;
    width: 100%;
    /*height: 65%;*/
    font-size: 2vw;
}
#input_button .same_size{
    flex: auto;
    margin: 1%;
    width: 18%;
    height: 20%;
    font-size: 1.5vw;
}
#input_button .equal_size{
    flex: auto;
    margin: 1%;
    width: 38%;
    height: 20%;
    font-size: 1.5vw;
}