欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

React+Redux怎么實現(xiàn)簡單的待辦事項列表ToDoList

這篇“React+Redux怎么實現(xiàn)簡單的待辦事項列表ToDoList”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“React+Redux怎么實現(xiàn)簡單的待辦事項列表ToDoList”文章吧。

為鐘祥等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及鐘祥網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都做網(wǎng)站、成都網(wǎng)站設計、鐘祥網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

功能樣式

React+Redux怎么實現(xiàn)簡單的待辦事項列表ToDoList

樣子就是這樣的
在輸入框輸入待辦事項
功能很簡單
鼠標點擊Add或者鍵盤按下Enter輸出
ShowAll顯示全部待辦事項
ShowActive顯示未完成的待辦事項（未劃掉的）
ShowCrossed顯示已完成的待辦事項（劃掉的）

配置文件

使用Webpack構建的文件夾如下

React+Redux怎么實現(xiàn)簡單的待辦事項列表ToDoList

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，并傳入輸入數(shù)據(jù)
 {
 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是一個數(shù)組，內(nèi)部數(shù)組元素是對象表示每一個列表項
 //option是一個字符串，表示當先選擇的選項
 switch(option){ //通過判斷當前的option字符串來決定是否過濾list數(shù)組
 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節(jié)點
 <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數(shù)組map映射為虛擬DOM節(jié)點
 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, //列表項內(nèi)容
 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()合并reducer
const store = createStore(reducer); //利用redux庫API-createStore()創(chuàng)建store
const render = () => { //自定義的渲染函數(shù)
 ReactDom.render(
 <ToDoList/>,
 document.getElementById('root')
 );
}
store.subscribe(render); //綁定render函數(shù)，每次state更新時執(zhí)行
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;
 }
 }
 }
}

以上就是關于“React+Redux怎么實現(xiàn)簡單的待辦事項列表ToDoList”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：React+Redux怎么實現(xiàn)簡單的待辦事項列表ToDoList
本文路徑：http://www.chinadenli.net/article10/gsjido.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、外貿(mào)網(wǎng)站建設、小程序開發(fā)、響應式網(wǎng)站、域名注冊、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設