• home > webfront > ECMAS > react >

    React+redux组件最简单的计算器!

    Author:zhoulujun@live.cn Date:

    react+redux做一个计算器,参考的是小米! 可以说是简易教程,重复写基表,其实react+redux原来啥的,要知道个七七八八了

    react+redux做一个计算器,参考的是小米!

    然后,第一次做!尼玛。想的太复杂了!

    react+redux开发简易计算器

    /**
     * Created by sf5 on 3/13/17.
     */
    
    import React from 'react';
    import { render } from 'react-dom';
    import {createStore,combineReducers} from 'redux';
    import { Provider,connect } from 'react-redux';
    require('styles/Calculator.scss');
    
    const states={
      result:'',
      input:0
    };
    
    const reducer=(state=states,action)=>{
      switch (action.type){
        case 'num':
          return{
            ...state,
            input:state.input===0?action.text:state.input+action.text
          };
        case 'operation':
          console.log(action.text);
          console.log(state.input);
          console.log(state.input.replace(/\D$/,action.text));
    
          return{
            ...state,
            // input:state.input===0?state.input:state.input+action.text
            input:state.input===0?state.input:/\d$/.test(state.input)?state.input+action.text:state.input.replace(/\D$/,action.text)
    
          };
        case 'clear':
          return{
            ...state,
            input:0,
            result:''
          };
        case 'equal':
          if(/\d$/.test(state.input)){
            return  {
              ...state,
              input:eval(state.input).toString(),
              result:state.input
            };
          }else {
            return state;
          }
    
        default:
          return state;
    
    
      }
    };
    //将state.counter绑定到props的counter
    const mapStateToProps=(state)=>{
      return{
        result:state.result,
        input:state.input
      }
    };
    //将action的所有方法绑定到props上
    const mapDispatchToProps=(dispatch)=>{
      return{
        touchNums:(text)=>dispatch({
          type:'num',
          text
        }),
        operate:(text)=>dispatch({
          type:'operation',
          text
        }),
        equal:()=>dispatch({
          type:'equal'
        }),
        clear:()=>dispatch({
          type:'clear'
        })
    
      }
    };
    
    class Calculator extends React.Component{
      constructor(props){
        super(props);
      }
      render(){
        let {result,input,touchNums,operate,equal,clear}=this.props;
        return(
                  {result}                                      7            8            9            /                                5            5            6            *                                1            2            3            -                                0            .            =            +                            );
      }
    }
    const  store=createStore(reducer);
    const ConnectCal=connect(mapStateToProps,mapDispatchToProps)(Calculator);
    render(
            ,
      document.getElementById('app')
    );

    然后发现,把代码优化下…………


    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    import  { connect, Provider} from 'react-redux';
    import {createStore,combineReducers} from 'redux';
    require('styles/Calculator.scss');
    const calState={
      value:0,
      btns:[
        'TAB','AC','Del','=',
        '1','2','3','+',
        '4','5','6','-',
        '7','8','9','*',
        '%','0','.','/'
      ]
    };
    const calculatorReducer=(state=calState,action)=>{
      switch (action.type){
        case 'addItem':
          return {
            ...state,
            value:state.value==0?action.text:state.value+action.text
          };
        case 'clear':
          return {
            ...state,
            value:0
          };
        case 'equal':
          return{
            ...state,
            value: eval(action.value)
          };
        default:
          return state;
      }
    };
    
    
    
    const mapStateToProps=(state) =>{
      return{
        value: state.value,
        btns: state.btns
      }
    };
    const mapDispatchToProps=(dispatch) =>{
      return{
        clear:()=>{
          dispatch({
            type:'clear'
          })
        },
        addItem:(text)=>{
          dispatch({
            type:'addItem',
            text
          })
        },
        equal:(value)=>{
          dispatch({
            type:'equal',
            value
          })
        }
      }
    }
    
    
    class Calculator extends Component{
      constructor(props){
        super(props)
      }
      render(){
        const {value,btns,addItem,clear,equal}=this.props;
        return(
                                    {btns.map((item,index)=>{
                switch (item){
                  case 'AC':
                    return {item};
                  case '=':
                    return {item};
                  case 'TAB':
                    return {item};
                  default:
                    return {item};
                }
              })}
                      )
    
      }
    }
    
    const  CalConnect=connect(mapStateToProps, mapDispatchToProps)(Calculator);
    
    const calculatorStore=createStore(calculatorReducer);
    
    ReactDOM.render(
              , document.getElementById('app'));
    @import "variate";
    
    @import "reset";
    
    @import "header";
    
    @import "content";
    @import "pop";
    
    
    @import "common";
    @import "media";
    .input{
      width: 100%;
      line-height: 22px;
      margin: 0;
      text-align: right;
      padding: 8px 6px;
      -webkit-appearance: none;
    }
    .box-table{
    
      >div{ min-height: 40px;}
      width: 162px;
      border:1px  solid #ccc;
      margin:  80px auto;
    }
    .tr{border-bottom: 1px solid #ccc;}
    .num{
      width: 40px;
      height: 40px;
      //border-radius: 4px;
      border:  solid #ccc;
      border-width: 1px 1px 0 0 ;
      &:last-of-type{
        border-right: none;
      }
      background: #efefef;
      outline: none;
      &:active,&:hover{
        background: #cfcfcf;
      }
    
    }
            Title



    转载本站文章《React+redux组件最简单的计算器!》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/jsBase/2017_0314_7960.html