React+Redux实现简单的待办事项列表ToDoList

2024-04-27 15:06:05

字体：大中小

来源：转载

供稿：网友

使用Redux做了一个简单的ToDoList待办事项列表这个例子也是源于Redux作者Dan Abramov的视频demo 还要特别说明一下我还没有使用react-redux库进行解耦（可能以后加）也没有拆分成多个文件等等优化为了单纯的练习redux 适合初步学习redux的同学本人学疏才浅，发现可以优化的地方或者问题还请大家指正，谢谢

功能样式

样子就是这样的在输入框输入待办事项功能很简单鼠标点击Add或者键盘按下Enter输出 ShowAll显示全部待办事项 ShowActive显示未完成的待办事项（未划掉的） ShowCrossed显示已完成的待办事项（划掉的）

配置文件

使用Webpack构建的文件夹如下

webpack.config.js配置文件

module.exports = { entry: { index: './src/js/entry.js' }, output: { path: './static/dist/', publicPath: 'http://localhost:8080/static/dist/', filename: '[name].js' }, module: { loaders: [ { test: //.js$/, loader: 'babel', exclude:/node_modules/, query: { PResets: ['react', 'es2015'] } }, { test: /.less$/, loader: 'style!CSS!less' } ] }}

package.json的依赖项

{ "name": "react-demo", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo /"Error: no test specified/" && exit 1", "diy": "webpack-dev-server --progress --colors --devtool sourcemap" }, "author": "Payson", "license": "ISC", "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.22.0", "css-loader": "^0.26.1", "jquery": "^3.1.1", "less": "^2.7.2", "less-loader": "^2.2.3", "react": "^15.4.2", "react-dom": "^15.4.2", "react-redux": "^5.0.2", "redux": "^3.6.0", "style-loader": "^0.13.1", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" }}

html文件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>React</title></head><body> <div id="root"></div> <script src="http://localhost:8080/static/dist/index.js"></script></body> </html>

脚本文件

没有细拆文件直接写在入口文件entry.js了注释就写在代码里了

require('../less/index.less'); //行间样式受限制不能添加伪类伪元素，所以还是添加了less(css)控制样式import React from 'react';import {Component} from 'react'import ReactDom from 'react-dom';import {createStore, combineReducers} from 'redux';class ToDoList extends Component { addHandler(){ //添加待办事项的listener let Inp = this.refs.Inp; //获取真实DOM的输入value if(!Inp.value){ //如果没有输入值，直接返回 return; } store.dispatch( //dispatch一个添加项目的action，并传入输入数据 { type: 'ADD_ITEM', newItem: Inp.value } ) Inp.value = ''; //提交后，清空输入 Inp.focus(); //重置输入焦点 } toggleHandler(item){ //Action Creator：负责提交切换中划线的action store.dispatch( { type: 'TOGGLE_ITEM', changeID: item.ID } ); } showAllHandler(){ //Action Creator：负责showAll的action store.dispatch( { type: 'SET_FILTER', filter: 'SHOW_ALL' } ); } showActiveHandler(){ //Action Creator：负责showActive的action store.dispatch( { type: 'SET_FILTER', filter: 'SHOW_ACTIVE' } ); } showCrossedHandler(){ //Action Creator：负责showCrossed的action store.dispatch( { type: 'SET_FILTER', filter: 'SHOW_CROSSED' } ); } render(){ //渲染结构样式 let _this = this; //缓存this let state = store.getState(); //缓存store的快照--state let {list, option} = state; //解构赋值获取两个子state //list是一个数组，内部数组元素是对象表示每一个列表项 //option是一个字符串，表示当先选择的选项 switch(option){ //通过判断当前的option字符串来决定是否过滤list数组 case 'SHOW_ACTIVE': list = list.filter(function(item){ return !item.del; }); break; case 'SHOW_CROSSED': list = list.filter(function(item){ return item.del; }); break; } document.body.addEventListener('keydown', function(e){ if(e.which == 13){ _this.addHandler(); } }); //绑定键盘enter事件 return ( <div> <input type="text" ref="Inp"/> //设置ref属性为了获取真实DOM节点 <button onClick={_this.addHandler.bind(_this)}>Add</button> <ul className="option"> <li onClick={_this.showAllHandler.bind(_this)}> <span style={{textDecoration: option!='SHOW_ALL' ? 'underline' : 'none'}}>ShowAll</span> </li> <li onClick={_this.showActiveHandler.bind(_this)}> <span style={{textDecoration: option!='SHOW_ACTIVE' ? 'underline' : 'none'}}>ShowActive</span> </li> <li onClick={_this.showCrossedHandler.bind(_this)}> <span style={{textDecoration: option!='SHOW_CROSSED' ? 'underline' : 'none'}}>ShowCrossed</span> </li> //判断option字符串来决定三个选项的样式 </ul> <ul className="list"> { list.map(function(item, index){ //通过list数组map映射为虚拟DOM节点 return <li key={index}> <span style={{textDecoration: item.del ? 'line-through': 'none'}} onClick={_this.toggleHandler.bind(_this, item)}>{item.item}</span> </li> }) } </ul> </div> ) }}const list = (state = [], action) => { //list-reducer switch(action.type){ case 'ADD_ITEM': return [ ...state, { item: action.newItem, //列表项内容 ID: state.length, //列表项ID del: false //列表项是否已划掉 } ]; case 'TOGGLE_ITEM': return state.map((item)=>{ return Object.assign({},item,{ del: action.changeID == item.ID ? !item.del : item.del }); }); default: return state; }}const option = (state = 'SHOW_ALL', action) => { //option-reducer switch(action.type){ case 'SET_FILTER': return action.filter; default: return state; }}const reducer = combineReducers({list, option}); //利用redux库API-combineReducers()合并reducerconst store = createStore(reducer); //利用redux库API-createStore()创建storeconst render = () => { //自定义的渲染函数 ReactDom.render( <ToDoList/>, document.getElementById('root') );}store.subscribe(render); //绑定render函数，每次state更新时执行render(); //首次渲染

样式文件

index.less文件加一些样式控制

.option { list-style-type: none; padding: 0; margin-top: 5px; font-size: 13px; li { float: left; margin-right: 15px; span { cursor: pointer; font-weight: bold; } } &::after { content: ''; display: block; clear: both; }}.list { li { span { &:hover { color: #f40; cursor: pointer; } &::selection { color: #000; background-color: #fff; } } }}

==主页传送门==

上一篇：Bootstrap导航条可点击和鼠标悬停显示下拉菜单

下一篇：javascript基础--对象(Object)继承