React初级之大数计算器(二)函数组件

废话少说,上代码:

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;

成品链接------>目前仅支持win