react_demo/calc/src/components/content/calc.jsx

import React, { Component } from 'react';
import Base from './base';
import {connect} from 'react-redux';
import DigitButton from '../calculator/digitButtton';
import ACTIONS from '../../redux/action';
import OperatorButton from '../calculator/operatorButton';

class Calc extends Component {
    state = {
        formatter: Intl.NumberFormat("en-us"),
      } 
    
    format = number => {
        if (number === "除数不能为0") {
            return "除数不能为0"
        }
        if (number === "") {
            return ""
        }

        const [integer,decimal] = number.split('.');
        
        if (decimal === undefined) {
            return this.state.formatter.format(integer);
        }
        return `${this.state.formatter.format(integer)}.${decimal}`;
      }
      
    
    render() { 
        return (
            <Base>
                <div className="calc">
                    <div className="output">
                        <div className="last-output">
                            {this.format(this.props.lastValue)} {this.props.operator}
                        </div>
                        <div className="currrent-output">
                            {this.format(this.props.currentValue)}
                        </div>
                    </div>

                    <button className='button-ac' onClick={this.props.clear}>AC</button>
                    <button onClick={this.props.delete_digit}>Del</button>

                    <OperatorButton operator={"÷"}></OperatorButton>

                    <DigitButton digit={"7"}/>
                    <DigitButton digit={"8"}/>
                    <DigitButton digit={"9"}/>
                    <OperatorButton operator={"×"}></OperatorButton>


                    <DigitButton digit={"4"}/>
                    <DigitButton digit={"5"}/>
                    <DigitButton digit={"6"}/>
                    <OperatorButton operator={"-"}></OperatorButton>


                    <DigitButton digit={"1"}/>
                    <DigitButton digit={"2"}/>
                    <DigitButton digit={"3"}/>
                    <OperatorButton operator={"+"}></OperatorButton>

                    <DigitButton digit={"0"}/>
                    <DigitButton digit={"."}/>
                    <button className='button-equal' onClick={this.props.evaluate}>=</button>


                </div>
            </Base>
        );
    }
}
const mapStateToProps = (state,props) => {
    return {
        lastValue: state.lastValue,
        currentValue: state.currentValue,
        operator: state.operator
    }
}

const mapDispatchToProps = {
    clear: () => {
        return {
            type: ACTIONS.CLEAR,
        }
    },
    delete_digit: () => {
        return {
            type: ACTIONS.DELETE_DIGIT,
        }
    },
    evaluate: () => {
        return {
            type: ACTIONS.EVALUATE,
        }
    }
}
 
export default connect(mapStateToProps,mapDispatchToProps)(Calc);