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