直接代码:
import styled from 'styled-components'; import React, { useState } from 'react'; import { BigNumber } from "bignumber.js"; import { makeStyles } from '@material-ui/core/styles'; import {Button,Input} from '@material-ui/core'; const Calculate = () => { const [state, setState] = useState({ currentNum: '', numA: '', operate: '', numB: '', result: '', value: 'mango', }) 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; } } default:{ 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() } ) } const classes = useStyles(); //需要先进行实例 function setRaw(icon) { return (<Button className={classes.root} style={BtnStyle} onClick={() => handleItem(icon)} key={icon}> {icon} </Button>) } function handleChange(e) { console.log(e.target.value); setState({ ...state, value: e.target.value, }) } 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 > <span style={MsgStyle}>Current: </span> <h5 style={{ ...MsgStyle, color: "green" }}>{state.currentNum}</h5> <span style={MsgStyle}>Formula: </span> <h5 style={{ ...MsgStyle, color: "blue" }}> {`${state.numA} ${state.operate} ${state.numB}`}</h5> <span style={MsgStyle}>result: </span> <h5 style={{ ...MsgStyle, color: "red" }}> {`${state.result}`}</h5> <select style={{ marginLeft: '2vw' }} value={state.value} onChange={handleChange}> <option value="grapefruit">葡萄</option> <option value="lime">酸橙</option> <option value="coconut">椰子</option> <option value="mango">芒果</option> </select> </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", fontWeight: 'bold', color:'black', borderRadius: '15px', border:'1px #f0b80b solid' // borderColor:'yellow red', }) const BtnStyle = ({ width: "24vw", fontSize: "x-large", }) const MsgStyle = ({ marginLeft: "2vw", wordWrap: "break-word", }) const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #383838 10%, #4D4D4D 90%)', border: 0, borderRadius: 8, boxShadow: '0 3px 5px 2px rgba(240, 184, 11, 0.3)', color: 'white', padding: '0 30px', }, }); export default Calculate