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

使用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 <inputtype="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);elseprvcontent=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;
}

使用React实现一个简单计算器相关推荐

模拟一个简单计算器_阅读模拟器的简单介绍
模拟一个简单计算器 Read simulators are widely being used within the research community to create synthetic an ...
用java编写一个简单计算器
java 采用java编写一个简单计算器,使用awt和swing 代码如下: import java.awt.Color; import java.awt.Font; import java.awt. ...
使用Qt做一个简单计算器
title: Calculator date: 2022-09-04 11:10:12 tags: [Qt, 应用, C++] typora-root-url: Calculator 使用Qt做一个简 ...
做一个简单计算器（两个数的加减乘除）扣扣116119409
做一个简单计算器(两个数的加减乘除) 一.语言和环境 a)实现语言Java b)环境要求Android Studio 二.要求: 1．可以清空,可以回退(一个一个回退): 2．按下去之后textvie ...
c语言设计程序计算器,C语言程序设计,做一个简单计算器
题目: C语言程序设计,做一个简单计算器程序内容有:加减乘除和平方,立方,开方等.用if或者swith结构来编程. 算加法时只输出加法的结果,算减法时只出减法的结果,如此类推. 解答: 已发送, # ...
QT实现一个简单计算器
QT实现一个简单计算器学生一枚,水平有限,如有问题,还望指正第一步通过QT设计师绘制出界面图形,界面大致如下: 第二步将保存的.ui文件转换为头文件,以便于自己创建的对象对其继承和使用 uic ...
电脑用java怎么编程,使用java编程从0到1实现一个简单计算器
学习编程语言最重要的就是实践.很多小伙伴在学习完编程语言后,一直停留在基础阶段,只懂一大堆理论知识,而不懂得实践.那么,今天我们一起来动手做一个小计算器,回顾下学习过的知识,同时这也是很多大学计算机专 ...
C#设计一个简单计算器，实现两个数的加、减、乘、除、求幂等计算
设计一个简单计算器,实现两个数的加.减.乘.除.求幂等计算 using System; using System.Collections.Generic; using System.Component ...
用AS编写一个简单计算器
一.简单的小背景老师之前布置的一个用AS实现一个简单计算器的作业,作为一个刚学AS的小白渣是真的无从下手...所以在网上东拼西凑也算是有了基础的想法. 大致框架出来了,最后依然有一些小bug我真的无 ...

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

使用React实现一个简单计算器相关推荐

最新文章

热门文章