react实现简单的计算器功能。

简单的计算器功能。

最近在学react，发现对react的掌握不是很熟练，于是就动手自己做了一个react计算器（因为计算器是最能理解生命周期的），话不多说，直接进入主题。

难点：

对于获取数字
React 获取 DOM 元素节点的文本内容
用e.target.innerText来实现。
运算字符串里面的数学公式用 eval 函数

后面基本上就是一些简单的逻辑与生命周期。

效果图

具体代码实现：

代码逻辑结构：

具体实现：

//calculator.js
import React, { Component } from "react";
import '../../demo.css';export default class Calculator extends Component {constructor(props) {super(props)this.state = {text: ""//实时更新用户输入的值}this.change = this.change.bind(this)this.cal = this.cal.bind(this)this.cl = this.cl.bind(this)this.del = this.del.bind(this)}//改变方法，主要用来计算change =(e)=> this.setState({text:this.state.text + e.target.innerText})//进行计算（调用数学方式）cal=()=> this.setState({text: eval(this.state.text)})//删除最后一位del=()=>this.setState({text:this.state.text.substring(0,this.state.text.length-1)})//清除cl=()=> this.setState({text:""})render() {return(<div className="form"><div ><div className="head">{/*========输入框======*/}<input type="text" id="ipt" className="ipt" value= {this.state.text}  /></div><div><div className="number1">{/*第一列键盘*/}<button style={{height:"35px",width:"30px"}} onClick={this.cal}>=</button><button style={{height:"35px",width:"30px"}} onClick={this.cl}>C</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>%</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>/</button></div><div  className="number2" >{/*第二列键盘*/}<button style={{height:"35px",width:"30px"}} onClick={this.change}>1</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>2</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>3</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>*</button></div><div className="number3">{/*第三列键盘*/}<button style={{height:"35px",width:"30px"}} onClick={this.change}>4</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>5</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>6</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>-</button></div><div className="number4">{/*第四列键盘*/}<button style={{height:"35px",width:"30px"}} onClick={this.change}>7</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>8</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>9</button><button style={{height:"35px",width:"30px"}} onClick={this.change}>+</button></div><div className="number5">{/*第五列键盘*/}<button style={{height:"30px",width:"30px"}} onClick={this.del}>←</button><button style={{height:"30px",width:"30px"}} onClick={this.change}>0</button><button style={{height:"30px",width:"30px"}} onClick={this.change}>.</button><button style={{height:"30px",width:"30px"}} onClick={this.change}> </button></div></div></div></div>);}}

index.js

import React, { Component } from "react";
import Calculator from "./calculator";export default class Index extends Component {render() {return (<div><Calculator/></div>);}
}

CSS样式：

###
.form{position: absolute;height: 400px;width: 230px;left:50%;top:50%;margin-left:-200px;margin-top:-200px;background-color: bisque;border-radius: 20px;}
.ipt{margin-top: 25px;margin-bottom: 10px;margin-left: 10px;border-radius: 15px;width: 200px;height: 80px;color: brown;font-size: 20px;background-color: azure;
}
.number1{display: flex;width: 200px;justify-content:space-between;margin-top: 10px;margin-bottom: 20px;margin-left: 12px;background-color: bisque;}
.number2{display: flex;width: 200px;justify-content:space-between;margin-top: 10px;margin-bottom: 22px;margin-left: 12px;background-color: bisque;
}
.number3{display: flex;width: 200px;justify-content:space-between;margin-top: 10px;margin-bottom: 22px;margin-left: 12px;background-color: bisque;
}
.number4{display: flex;width: 200px;justify-content:space-between;margin-top: 10px;margin-bottom: 22px;margin-left: 12px;background-color: bisque;
}
.number5{display: flex;width: 200px;justify-content:space-between;margin-top: 10px;margin-bottom: 22px;margin-left: 12px;background-color: bisque;
}

react实现简单的计算器功能。相关推荐

android实现计算器功能吗,利用Android实现一个简单的计算器功能
利用Android实现一个简单的计算器功能发布时间:2020-11-20 16:25:01 来源:亿速云阅读:90 作者:Leah 今天就跟大家聊聊有关利用Android实现一个简单的计算器功能, ...
php四则运算出题器_PHP实现的简单四则运算计算器功能示例
本文实例讲述了PHP实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: php实现一个简单的四则运算计算器(还不支持括号的优先级).利用栈这种数据结构来计算表达式很赞. 这里可以使用栈的结 ...
编写简单的计算器功能的程序
使用switch语句实现简单的加减乘除具体代码如下: #include<stdio.h> int main() {int date1, date2; char op;printf(&qu ...
Android实现简单的计算器功能
Android实现简单的计算器功能 **前言:**通过Android实现简单的计算器功能,实现简单的加.减.乘.除操作. 效果图如下: 第一步布局文件:activity_main.xml <? ...
C语言编程实现简单的计算器功能
编程实现简单的计算器功能,要求用户按如下格式从键盘输入算式: 操作数1 运算符op 操作数2 计算并输出表达式的值,其中算术运算符包括:加(+).减(-).乘().除(/).^(次幂). 要求使其能进 ...
android计算器功能实现,在android中利用 studio实现一个简单的计算器功能
在android中利用 studio实现一个简单的计算器功能发布时间:2020-11-07 15:35:20 来源:亿速云阅读:168 作者:Leah 这篇文章将为大家详细讲解有关在android ...
编程实现简单的计算器功能(swich)
编程实现简单的计算器功能,要求用户按如下格式从键盘输入算式: 操作数1 运算符op 操作数2 计算并输出表达式的值,其中运算符为:加( + ).减( - ),乘( * ).除( / ) 用 ...
php计算器按钮功能,PHP简单在线计算器功能示例
PHP简单在线计算器功能示例 PHP可以被嵌入于HTML语言,它相对于其他语言.编辑简单,实用性强,更适合初学者.下面是小编分享的PHP简单在线计算器功能示例,一起来看一下吧. 简单的计算器(www. ...
给定两个整数，例如4和5，实现简单的计算器功能，即求出他们的和，差、积、商、余数。
给定两个整数,例如4和5,实现简单的计算器功能,即求出他们的和,差.积.商.余数. #include<stdio.h> int main() {int IOperator,rOperato ...
php 在线数据计算器,PHP实现的简单在线计算器功能示例
本文实例讲述了PHP实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 简单的计算器 //如果用户单击了计算按钮才存在表单变量,才能接收表单数据和对数据进行验证 //以下if语句判断是否将表单 ...

react实现简单的计算器功能。

简单的计算器功能。

效果图

具体代码实现：

react实现简单的计算器功能。相关推荐

最新文章

热门文章