效果图如下
直接上代码
目录如下，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 ButtonText/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 TextCounter/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 CounterCounter/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实现一个简单计算器》，计算逻辑是自己写的，如有不足，欢迎指出。