用js/react写一个计算器

效果图如下

直接上代码

目录如下，Button和Text是自己封装的Button组件和Input组件

Button/index.js

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

class Button extends Component {
  render() {
    return <input 
      type='button' 
      value={this.props.value} 
      className={this.props.className ? this.props.className : 'button_type'}
    ></input>
  }
}

export default Button

Text/index.js

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

class Text extends Component {
  render() {
    return <input className="text_type" type='text' value={this.props.value} readOnly={true}></input>
  }
}

export default Text

Counter/index.js

import React, { Component } from "react"
import Button from './components/Button'
import Text from "./components/Text"
import './index.css'

class Counter extends Component {
  constructor() {
    super()
    this.state = {
      text: ''
    }
  }
  onClickButton=(e) => {
    if(e.target.value) {
      let currentValue = e.target.value
      let prvcontent = this.state.text
      let content = ''

      switch (e.target.value) {
        case '+':
        case '-':
        case '*':
        case '/':
          let arr1 = prvcontent.split(' ')
          if(arr1.length > 1) {
            if(arr1[arr1.length -1] === '') {
              arr1.pop()
              arr1.pop()
              prvcontent = arr1.join(' ')
            } else if(arr1.length === 3) {
              switch (arr1[1]) {
                case '+':
                  prvcontent = parseFloat(arr1[0]) + parseFloat(arr1[2])
                  break;
                case '-':
                  prvcontent = parseFloat(arr1[0]) - parseFloat(arr1[2])
                  break;
                case '*':
                  prvcontent = parseFloat(arr1[0]) * parseFloat(arr1[2])
                  break;
                case '/':
                  if(arr1[2] === 0) {
                    prvcontent = '除数不能为零'
                  } else {
                    prvcontent = parseFloat(arr1[0]) / parseFloat(arr1[2])
                  }
                  break;
                default:
                  break;
              }
            }
          }
          content = prvcontent + ' ' + currentValue + ' '
          break;
        case 'C':
          content = ''
          break;
        case 'Back':
          if(prvcontent.length === 1) {
            prvcontent = ''
          } else {
            if(prvcontent[prvcontent.length - 1] === ' ' && prvcontent[prvcontent.length - 3] === ' ') {
              prvcontent = prvcontent.slice(0, prvcontent[prvcontent.length - 3])
            } else {
              prvcontent = prvcontent.slice(0, prvcontent[prvcontent.length - 1])
            }
          }
          content = prvcontent
          break;
        case '=':
          let arr2 = prvcontent.split(' ')
          if(arr2.length > 1) {
            if(arr2[0] && arr2[2]) {
              switch (arr2[1]) {
                case '+':
                  content = parseFloat(arr2[0]) + parseFloat(arr2[2])
                  break;
                case '-':
                  content = parseFloat(arr2[0]) - parseFloat(arr2[2])
                  break;
                case '*':
                  content = parseFloat(arr2[0]) * parseFloat(arr2[2])
                  break;
                case '/':
                  if(arr2[2] === 0) {
                    content = '除数不能为零'
                  } else {
                    content = parseFloat(arr2[0]) / parseFloat(arr2[2])
                  }
                  break;
                default:
                  break;
              }
            } else if(arr2[0] && !arr2[2]) {
              switch (arr2[1]) {
                case '+':
                  content = parseFloat(arr2[0]) + parseFloat(arr2[0])
                  break;
                case '-':
                  content = parseFloat(arr2[0]) - parseFloat(arr2[0])
                  break;
                case '*':
                  content = parseFloat(arr2[0]) * parseFloat(arr2[0])
                  break;
                case '/':
                  if(arr2[0] === 0) {
                    content = '结果未定义'
                  } else {
                    content = parseFloat(arr2[0]) / parseFloat(arr2[0])
                  }
                  break;
                default:
                  break;
              }
            } else if(!arr2[0] && arr2[2]) {
              switch (arr2[1]) {
                case '+':
                  content = 0 + parseFloat(arr2[2])
                  break;
                case '-':
                  content = 0 - parseFloat(arr2[2])
                  break;
                case '*':
                case '/':
                  content = 0
                  break;
                default:
                  break;
              }
            }
          } else if(arr2.length === 1) {
            if(arr2[0]) {
              if(arr2[0] === '.') {
                content = 0
              } else {
                content = arr2[0]
              }
            }
          }
          break;
        default:
          content = prvcontent + currentValue
          break;
      }
      this.setState({
        text: content
      })
    }
  }

  render() {
    return (
      <div>
        <div>
          <Text value={this.state.text}></Text>
        </div>
        <div onClick={this.onClickButton} className="button_div">
          <div>
            <Button value={1}></Button>
            <Button value={2}></Button>
            <Button value={3}></Button>
            <Button value={'Back'} className={"other_button"}></Button>
          </div>
          <div>
            <Button value={4}></Button>
            <Button value={5}></Button>
            <Button value={6}></Button>
            <Button value={'+'}></Button>
            <Button value={'-'}></Button>
          </div>
          <div>
            <Button value={7}></Button>
            <Button value={8}></Button>
            <Button value={9}></Button>
            <Button value={'*'}></Button>
            <Button value={'/'}></Button>
          </div>
          <div>
            <Button value={'C'}></Button>
            <Button value={0}></Button>
            <Button value={'.'}></Button>
            <Button value={'='} className={"other_button"}></Button>
          </div>
        </div>
      </div>
    )
  }
}

export default Counter

Counter/index.css

.button_type {
  width: 30px;
  flex: auto;
  margin: 2px;
}
.other_button {
  width: 64px;
  flex: auto;
  margin: 2px;
}
.text_type {
  width: 158px;
  margin: 2px;
}
.button_div {
  width: 200px;
}

 

本文结构参考了@风吹行舟的《使用React实现一个简单计算器》，计算逻辑是自己写的，如有不足，欢迎指出。