react實現todolist 增刪改查

實現需求：todolist實現增刪改查；

環境搭建工具：node.js,webpack,webpack-dev-server,babel編譯jsx,es6

安裝 gitclone [email protected]:lernalot/react-todolist-.git ，npm install，注意node-modules裡一定要有localdb資料夾。

// 新增

handleclick(),()=>)
this.refs.myinput.value = ""
}

值得注意的，這裡相比增加方法的setstate，這裡渲染的是this.state.todos，而不是對資料庫的渲染，主要是考慮到查詢之後當前list有可能為一部分的陣列，使用者希望是在當前查詢到的list刪除和顯示，所以就渲染了this.state.todos，但之後對資料庫進行刪除操作，才是真正的對資料做了修改。

//刪除

,()=>)
}}>刪除

//修改

,()=>)
}}}>修改

querylist(queryarr));

if(this.state.todos.length == this.db.get('todos').length && queryarr.length == 0)
if(queryarr.length == 0));
}else);
} 
}

react元件化todolist例項

首先建立react的腳手架 具體建立步驟自己查 首先建立乙個todelist 在src下建立乙個components資料夾 裡面建立乙個todo的資料夾 todo裡面建立乙個index.js檔案這裡是父元件 在裡面寫 此處只是做乙個小例子演示下react的元件化 元件化的理解 1.元件的封裝 檢視 ...

React 入門 做乙個簡單todolist

第一步，看文件，不多說 環境準備 npm start or yarn start npx 是乙個幫你執行檔案的工具 npx 會自動查詢當前依賴包中的可執行檔案，如果找不到，就會去 path 裡找。如果依然找不到，就會幫你安裝！打卡src目錄，只保留index.jsreactdom相關的 index....

Redux管理狀態 todoList實現

redux就是react的狀態管理工具 cnpm install s redux 我們在src下建乙個store檔案，裡面有index，和reducer 下面我們建立store 資料 可以是ajax請求的 const defaultstaet 匯出 export default state defa...