基于react写一个计算器

最新推荐文章于 2024-06-05 22:55:48 发布

原创最新推荐文章于 2024-06-05 22:55:48 发布 · 672 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

62 篇文章

订阅专栏

这是一个使用React编写的简单计算器应用。应用包含输入框显示计算内容、清除按钮、运算符选择、数字按钮以及等号按钮，实现了基本的加减乘除运算。当点击等号按钮时，根据已输入的数字和运算符计算结果，并在屏幕上展示。

.calculator{
  width:90%;
  border: 1px darkblue ;
  margin: 40px auto 0;
  text-align: center;
  background-color: white;
  border-radius: 10px;
}

.calculator button{
  width:65px;
  height: 65px;
  border-radius: 10%;
  border: whitesmoke solid 1px;
  background: lightskyblue;
  font-size: 30px;
  margin: 5px;
}

.calculator input{
  height:50px;
  font-size: 30px;
  width: 90%;
  text-align: right;
  margin:5px ;
  border: 0;
}

.calculator label{
  display: block;
  height:30px;
  font-size: 20px;
  text-align: right;
  width: 90%;
  color: gray;
}

Calculator.js

import React from 'react'
import 'antd-mobile/dist/antd-mobile.css'
import style from './home.css'

class Calculator extends React.Component{

    constructor(props){
        super(props);
        this.state=({
            buttons:['MC','M+','M-','MR','C','÷','×','⬅',7,8,9,'-',4,5,6,'+',1,2,3,'=','%',0,'.','='],
            screenContent:'',
            operator:'',
            numbers:[],
            result:'',
        });
    }

    componentDidMount(){
    }

    componentDidUpdate(prevState){

    }

    handleClick(button){
      console.log('响应点击事件',button);
      //文本框显示计算内容
      let screenContent = this.state.screenContent;
      screenContent+=button;
      if(button==='C'){
        // screenContent='';
        // this.setState({numbers:[],operator:''});
        window.location.href = '/myapp/index/Calculator';
      }
      this.setState({screenContent:screenContent});
      //存储数据和操作符
      if(button==='÷'|| button==='×'|| button ==='-' || button==='+'){
        this.setState({operator: button});
      }else {
        this.setState((state)=>{
          console.log(state.numbers,button);
          if(state.numbers.length>=1 && this.state.operator===''){
            let numStr =state.numbers[0].toString()+button.toString();
            if(button==='.'){
              numStr+='000000000001';
            }
            console.log('连续数字',parseFloat('66.7'));
            const num = parseFloat(numStr);
            return{ numbers: [num]}
          }
          return{ numbers: [...state.numbers,button]}
          },()=>{
          //计算
          const operator = this.state.operator;
          if(operator!==''){
            let result = 0;
            let numbers = this.state.numbers;
            console.log('ddddddd',operator,this.state.numbers);
            const a1 = numbers.pop();
            const a2 = numbers.pop();
            switch (operator){
              case '+':result = a2+a1;numbers.push(result);this.setState({numbers:numbers});break;
              case '-':result = a2-a1;numbers.push(result);this.setState({numbers:numbers});break;
              case '×':result = a2*a1;numbers.push(result);this.setState({numbers:numbers});break;
              case '÷':result = a2/a1;numbers.push(result);this.setState({numbers:numbers});break;
            }
            console.log(result);
            this.setState({result:result});
          }
        });
      }
    }

    render(){
        return     <div className={style.calculator}>
          <input defaultValue={this.state.screenContent}/>
          <label>{this.state.result+''}</label>
          {
            this.state.buttons.map(button=>(<button onClick={this.handleClick.bind(this,button)}>{button}</button>))
          }
        </div>

    }
}

export default Calculator

效果如下：
在这里插入图片描述