用js/react写计算器

效果图如下

直接上代码

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

Button/index.js

1.  
   import react, {Component} from "react";
2.  
   import '../../index.css'
3.  
    
4.  
   class Button extends Component {
5.  
   render() {
6.  
   return <input
7.  
   type='button'
8.  
   value={this.props.value}
9.  
   className={this.props.className ? this.props.className : 'button_type'}
10.  
    ></input>
11.  
    }
12.  
    }
13.  
     
14.  
    export default Button

Text/index.js

1.  
   import react, {Component} from "react";
2.  
   import '../../index.css'
3.  
    
4.  
   class Text extends Component {
5.  
   render() {
6.  
   return <input className="text_type" type='text' value={this.props.value} readOnly={true}></input>
7.  
   }
8.  
   }
9.  
    
10.  
    export default Text

Counter/index.js

1.  
   import React, { Component } from "react"
2.  
   import Button from './components/Button'
3.  
   import Text from "./components/Text"
4.  
   import './index.css'
5.  
    
6.  
   class Counter extends Component {
7.  
   constructor() {
8.  
   super()
9.  
   this.state = {
10.  
    text: ''
11.  
    }
12.  
    }
13.  
    onClickButton=(e) => {
14.  
    if(e.target.value) {
15.  
    let currentValue = e.target.value
16.  
    let prvcontent = this.state.text
17.  
    let content = ''
18.  
     
19.  
    switch (e.target.value) {
20.  
    case ' ':
21.  
    case '-':
22.  
    case '*':
23.  
    case '/':
24.  
    let arr1 = prvcontent.split(' ')
25.  
    if(arr1.length > 1) {
26.  
    if(arr1[arr1.length -1] === '') {
27.  
    arr1.pop()
28.  
    arr1.pop()
29.  
    prvcontent = arr1.join(' ')
30.  
    } else if(arr1.length === 3) {
31.  
    switch (arr1[1]) {
32.  
    case ' ':
33.  
    prvcontent = parseFloat(arr1[0]) parseFloat(arr1[2])
34.  
    break;
35.  
    case '-':
36.  
    prvcontent = parseFloat(arr1[0]) - parseFloat(arr1[2])
37.  
    break;
38.  
    case '*':
39.  
    prvcontent = parseFloat(arr1[0]) * parseFloat(arr1[2])
40.  
    break;
41.  
    case '/':
42.  
    if(arr1[2] === 0) {
43.  
    prvcontent = '除数不能为零'
44.  
    } else {
45.  
    prvcontent = parseFloat(arr1[0]) / parseFloat(arr1[2])
46.  
    }
47.  
    break;
48.  
    default:
49.  
    break;
50.  
    }
51.  
    }
52.  
    }
53.  
    content = prvcontent ' ' currentValue ' '
54.  
    break;
55.  
    case 'C':
56.  
    content = ''
57.  
    break;
58.  
    case 'Back':
59.  
    if(prvcontent.length === 1) {
60.  
    prvcontent = ''
61.  
    } else {
62.  
    if(prvcontent[prvcontent.length - 1] === ' ' && prvcontent[prvcontent.length - 3] === ' ') {
63.  
    prvcontent = prvcontent.slice(0, prvcontent[prvcontent.length - 3])
64.  
    } else {
65.  
    prvcontent = prvcontent.slice(0, prvcontent[prvcontent.length - 1])
66.  
    }
67.  
    }
68.  
    content = prvcontent
69.  
    break;
70.  
    case '=':
71.  
    let arr2 = prvcontent.split(' ')
72.  
    if(arr2.length > 1) {
73.  
    if(arr2[0] && arr2[2]) {
74.  
    switch (arr2[1]) {
75.  
    case ' ':
76.  
    content = parseFloat(arr2[0]) parseFloat(arr2[2])
77.  
    break;
78.  
    case '-':
79.  
    content = parseFloat(arr2[0]) - parseFloat(arr2[2])
80.  
    break;
81.  
    case '*':
82.  
    content = parseFloat(arr2[0]) * parseFloat(arr2[2])
83.  
    break;
84.  
    case '/':
85.  
    if(arr2[2] === 0) {
86.  
    content = '除数不能为零'
87.  
    } else {
88.  
    content = parseFloat(arr2[0]) / parseFloat(arr2[2])
89.  
    }
90.  
    break;
91.  
    default:
92.  
    break;
93.  
    }
94.  
    } else if(arr2[0] && !arr2[2]) {
95.  
    switch (arr2[1]) {
96.  
    case ' ':
97.  
    content = parseFloat(arr2[0]) parseFloat(arr2[0])
98.  
    break;
99.  
    case '-':
100.  
     content = parseFloat(arr2[0]) - parseFloat(arr2[0])
101.  
     break;
102.  
     case '*':
103.  
     content = parseFloat(arr2[0]) * parseFloat(arr2[0])
104.  
     break;
105.  
     case '/':
106.  
     if(arr2[0] === 0) {
107.  
     content = '结果未定义'
108.  
     } else {
109.  
     content = parseFloat(arr2[0]) / parseFloat(arr2[0])
110.  
     }
111.  
     break;
112.  
     default:
113.  
     break;
114.  
     }
115.  
     } else if(!arr2[0] && arr2[2]) {
116.  
     switch (arr2[1]) {
117.  
     case ' ':
118.  
     content = 0 parseFloat(arr2[2])
119.  
     break;
120.  
     case '-':
121.  
     content = 0 - parseFloat(arr2[2])
122.  
     break;
123.  
     case '*':
124.  
     case '/':
125.  
     content = 0
126.  
     break;
127.  
     default:
128.  
     break;
129.  
     }
130.  
     }
131.  
     } else if(arr2.length === 1) {
132.  
     if(arr2[0]) {
133.  
     if(arr2[0] === '.') {
134.  
     content = 0
135.  
     } else {
136.  
     content = arr2[0]
137.  
     }
138.  
     }
139.  
     }
140.  
     break;
141.  
     default:
142.  
     content = prvcontent currentValue
143.  
     break;
144.  
     }
145.  
     this.setState({
146.  
     text: content
147.  
     })
148.  
     }
149.  
     }
150.  
      
151.  
     render() {
152.  
     return (
153.  
     <div>
154.  
     <div>
155.  
     <Text value={this.state.text}></Text>
156.  
     </div>
157.  
     <div onClick={this.onClickButton} className="button_div">
158.  
     <div>
159.  
     <Button value={1}></Button>
160.  
     <Button value={2}></Button>
161.  
     <Button value={3}></Button>
162.  
     <Button value={'Back'} className={"other_button"}></Button>
163.  
     </div>
164.  
     <div>
165.  
     <Button value={4}></Button>
166.  
     <Button value={5}></Button>
167.  
     <Button value={6}></Button>
168.  
     <Button value={' '}></Button>
169.  
     <Button value={'-'}></Button>
170.  
     </div>
171.  
     <div>
172.  
     <Button value={7}></Button>
173.  
     <Button value={8}></Button>
174.  
     <Button value={9}></Button>
175.  
     <Button value={'*'}></Button>
176.  
     <Button value={'/'}></Button>
177.  
     </div>
178.  
     <div>
179.  
     <Button value={'C'}></Button>
180.  
     <Button value={0}></Button>
181.  
     <Button value={'.'}></Button>
182.  
     <Button value={'='} className={"other_button"}></Button>
183.  
     </div>
184.  
     </div>
185.  
     </div>
186.  
     )
187.  
     }
188.  
     }
189.  
      
190.  
     export default Counter

Counter/index.css

1.  
   .button_type {
2.  
   width: 30px;
3.  
   flex: auto;
4.  
   margin: 2px;
5.  
   }
6.  
   .other_button {
7.  
   width: 64px;
8.  
   flex: auto;
9.  
   margin: 2px;
10.  
    }
11.  
    .text_type {
12.  
    width: 158px;
13.  
    margin: 2px;
14.  
    }
15.  
    .button_div {
16.  
    width: 200px;
17.  
    }

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

这篇好文章是转载于：学新通技术网