React+redux组件最简单的计算器!
Author:[email protected] Date:
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
延伸阅读:
- grunt使用yeoman自动化构建react项目……
- browser.js什么鬼?作用是什么
- React on ES6+:react.component vs react.createclass的异同
- React项目中常见的技术坑与优化及Component Generator
- react更新组件componentWillReceiveProp里面setState无效,未触发渲染
- can't resolve 'redux-thunk' in *** 项目不能跑起
- react+redux渲染页面空白,原来是大小写惹的祸害
- react:Uncaught TypeError: Cannot read property
- react组件中bind(this)写在哪里好?
- react-dom.min.js:15 Uncaught (in promise) Error: Minified React error
- react hook context 管理全局状态
- TypeScript写React组件默认属性问题
- React 同构实践与思考
- React代数效应学习笔记
- ReactHook详解:memo/useMemo/useCallback等钩子细讲
- jsx动态class写法:vue3与react+classname库
- react异步数据如ajax请求应该放在哪个生命周期?
- React 源码剖析系列—生命周期的管理艺术—有限状态机
- React 源码剖析系列 - 解密 setState
- React16源码分析(2):react.development.js源码注释
- React16源码分析(1):react项目架构/文件目录/包结构解读
- React16源码分析(0):对象池/合成事件/事务机制等概念科普
- React Fiber实现原理分析
- 再谈react优势——react技术栈回顾