用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.valuelet prvcontent = this.state.textlet 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 = prvcontentbreak;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 = 0break;default:break;}}} else if(arr2.length === 1) {if(arr2[0]) {if(arr2[0] === '.') {content = 0} else {content = arr2[0]}}}break;default:content = prvcontent + currentValuebreak;}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实现一个简单计算器》，计算逻辑是自己写的，如有不足，欢迎指出。

用js/react写一个计算器相关推荐

input点击事件不能用_用js简单写一个计算器
嗨,大家好,今天给大家带来的是一个计算器首先要知道我们常用的计算器都有哪些按键,有'0~9','+' ,' -' , '*', '/',还有'=' 和'.',基本是这些按键,然后我们去创建一些按键. ...
vue手写一个计算器
计算器大家都不陌生有计算器机器有手机计算器网页计算器! 那么好今天我来给大家手写一个计算器啥都不说上操作请听题:vue手写计算器一个个小方块拼成一个计算器绿色比较好可以缓解视力哦 i ...
[react] 写一个react的高阶组件并说明你对高阶组件的理解
[react] 写一个react的高阶组件并说明你对高阶组件的理解定义高阶组件 import React, { Component } from 'react';const simpleHoc = ...
[react] 使用react写一个todo应用，说说你的思路
[react] 使用react写一个todo应用,说说你的思路拆分组件:应用 + 表单部分(input + button).列表部分(checkbox + ul>li + delete but ...
[js] 手写一个trim()的方法
[js] 手写一个trim()的方法 function trim(str) { if (str[0] === ' ' && str[str.length - 1] === ' ') { ...
[js] 请写一个性能最好的深度克隆对象的方法
[js] 请写一个性能最好的深度克隆对象的方法 const deepClone = (obj) => {const copy = obj instance Array ? [] : {};for ...
python 写一个计算器_Python | 写个计算器吧
今天咱们用python来写一个计算器,计算一组数的最大公约数和最小公倍数吧. 注:本文使用python3 01 死循环下面给出一段看似正确的代码,这段代码的作用是给出n1,n2的最小公倍数. 你可以 ...
写一个计算器（C语言版本），可以求出：整数的加，减，乘，除四则运算
写一个计算器(C语言版本),可以求出:整数的加,减,乘,除四则运算! 对于求出整数的加减乘除问题,我想大家现如今看见笔者此篇博文时候!大多都已经能够正确写出准确的代码来求整数的加减乘除了!其实对于计算 ...
用js来写一个478呼吸动画来做393的默想吧-用js来写一个478呼吸动画
title: 用js来写一个478呼吸动画来做393的默想吧 date: 2023-02-12 09:37:34.01 updated: 2023-02-23 17:38:15.804 url: ht ...

用js/react写一个计算器

用js/react写一个计算器相关推荐

最新文章

热门文章