废话少说,上代码:
import React,{useState} from 'react';
import { BigNumber } from "bignumber.js";
import styled from 'styled-components';
const Calculate = () => {
const [state, setState] = useState({
currentNum: '',
numA: '',
operate: '',
numB: '',
result: ''
})
function updateCurrent(e) {
setState({
...state,
currentNum: e.target.value
})
}
function handleItem(icon) {
switch (icon) {
case "=": {
if (state.currentNum === '') {
break;
}
setState({
...state,
numB: state.currentNum,
currentNum: ''
});
getResult(state.numA, state.currentNum);
break;
}
case "C": {
setState({
...state,
numA: '',
numB: '',
operate: '',
result: '',
currentNum: ''
});
break;
}
case "D": {
if (state.currentNum === '' && state.operate !== '' && state.numA !== '') {
setState({
...state,
operate: '',
currentNum: state.numA
});
break;
}
setState({
...state,
currentNum: state.currentNum.slice(0, -1)
});
if (state.result !== '') {
setState({
...state,
numA: '',
numB: '',
operate: '',
result: ''
});
}
break;
}
case ".": {
let dot = '';
if (state.currentNum === '') {
dot = '0.';
setState({
...state,
currentNum: dot,
result: ''
})
} else if (new BigNumber(state.currentNum + '1').isInteger()) {
dot = state.currentNum + ".";
setState({
...state,
currentNum: dot,
result: ''
})
}
break;
}
case "%":
case "/":
case "+":
case "-":
case "^":
case "*": {
if (state.numA !== '' && state.operate !== '' && state.result == '') {
break;
}
if (state.currentNum === '' && state.numA === '') {
setState({
...state,
numA: '0',
operate: icon,
numB: '',
currentNum: '',
result: ''
});
break;
}
setState({
...state,
numA: state.currentNum,
operate: icon,
numB: '',
currentNum: '',
result: ''
});
break;
}
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0": {
if (state.currentNum == '0') {
setState({
...state,
currentNum: icon
});
break;
}
if (state.result !== '') {
setState({
...state,
numA: '',
numB: '',
operate: '',
currentNum: icon,
result: ''
});
break;
} else {
setState({
...state,
currentNum: state.currentNum + '' + icon
});
break;
}
}
}
}
function getResult(a, b) {
let ans = new BigNumber('0');
switch (state.operate) {
case '+': {
ans = new BigNumber(a).plus(new BigNumber(b));
break;
}
case '-': {
ans = new BigNumber(a).minus(new BigNumber(b));
break;
}
case '*': {
ans = new BigNumber(a).times(new BigNumber(b));
break;
}
case '/': {
if (new BigNumber(b).isZero()) {
ans = new BigNumber(0);
break;
}
ans = new BigNumber(a).div(new BigNumber(b));
break;
}
case '^': {
ans = new BigNumber(a).pow(new BigNumber(b));
break;
}
case '%': {
ans = new BigNumber(a).mod(new BigNumber(b));
break;
}
default: {
b = b == '' ? 0 : b;
ans = new BigNumber(b);
break;
}
}
setState(
{
...state,
numB: new BigNumber(b).toFixed(),
currentNum: ans.toFixed(),
result: ans.toFixed()
}
)
}
function setRaw(icon) {
return (<button
style={BtnStyle}
onClick={() => handleItem(icon)}
key={icon}>
{icon}
</button>)
}
return (
<Wapper>
<Header >
<input
style={InputStyle}
type="search"
placeholder="请输入数值"
onChange={updateCurrent}
value={state.currentNum} />
</Header>
<Body >
{['C', 'D', '%', '/'].map((item) => {
return (setRaw(item))
})}
{['7', '8', '9', '*'].map((item) => {
return (setRaw(item))
})}
{['4', '5', '6', '-'].map((item) => {
return (setRaw(item))
})}
{['1', '2', '3', '+'].map((item) => {
return (setRaw(item))
})}
{['^', '0', '.', '='].map((item) => {
return (setRaw(item))
})}
</Body >
<Footer >
<h5 style={MsgStyle}>Current: </h5>
<h5 style={{
...MsgStyle,
color: "green"
}}>{state.currentNum}</h5>
<h5 style={MsgStyle}>Formula: </h5>
<h5 style={{
...MsgStyle,
color: "blue"
}}> {`${state.numA} ${state.operate} ${state.numB}`}</h5>
<h5 style={MsgStyle}>result: </h5>
<h5 style={{
...MsgStyle,
color: "red"
}}> {`${state.result}`}</h5>
</Footer >
</Wapper>
);
}
const Wapper = styled.div`
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
`
const Header = styled.div`
display: inline-flex;
width: 100vw;
height: 100px;
`
const Body = styled.div`
width: 100vw;
flex-grow: 1;
display:flex;
flex-wrap: wrap;
justify-content:center;
`
const Footer = styled.div`
width: 100vw;
height: 200px;
`
const InputStyle = ({
width: "96vw",
height: "85px",
fontSize: "x-large",
textAlign: "right",
overflow: "hidden",
textOverflow: "ellipsis",
wordWrap: "break-word",
margin: "auto",
})
const BtnStyle = ({
width: "24vw",
fontSize: "x-large"
})
const MsgStyle = ({
margin: "auto",
width: "96vw",
wordWrap: "break-word",
})
export default Calculate;