詳解React中的todo-list
基于React的一個(gè)簡(jiǎn)單Todo-list
先賭為快:在線DEMO,感覺(jué)還不錯(cuò)點(diǎn)一下star -_- ~
源碼地址:
一、已經(jīng)完成的功能
1、新增選項(xiàng)(默認(rèn)未完成)
2、完成狀態(tài)可以切換
3、當(dāng)前選項(xiàng)可以刪除
4、全部選項(xiàng)選中狀態(tài)切換
5、全部個(gè)數(shù),完成個(gè)數(shù),未完成個(gè)數(shù)實(shí)時(shí)讀取
6、刷新?tīng)顟B(tài)不變
7、雙擊可以編輯(有個(gè)坑:雙擊編輯內(nèi)input的keyUp Enter保存會(huì)連帶觸發(fā)blur失去焦點(diǎn)保存。已解決:通過(guò)設(shè)置一個(gè)可以保存的狀態(tài)控制)
二、待完成(新增路由)
三、目錄結(jié)構(gòu)

3.1、主要邏輯只涉及:Todo(父組件),TodoAdd(輸入框子組件一),TodoList(選項(xiàng)列表子組件二)
3.2、父子組件通過(guò)props(可以是自定義屬性、對(duì)象、回調(diào)函數(shù))通信,每個(gè)組件都有自己的state,可以通過(guò)setState改變當(dāng)前的state。
例如:新增的時(shí)候,父組件是如何知道新增了一個(gè)什么內(nèi)容呢?如下:
// Todo.jsx內(nèi)
//1 傳遞給子組件的回調(diào)函數(shù),只要有心得內(nèi)容傳遞過(guò)來(lái),就更新當(dāng)前的:list。list只要更新,通過(guò)props傳遞給TodoList的data就會(huì)更新,DOM就會(huì)新增一個(gè)選項(xiàng)列表
onAddSubmit(addTitle) {
console.log("增加了:" + addTitle)
let addItem = {
title: addTitle,
isFinished: false
}
this.state.list.unshift(addItem)
this.setState({ list: this.state.list })
this._saveToSession()
}
// 通過(guò)props傳遞給子組件(等待使用)
<TodoAdd onAddSubmit={this.onAddSubmit} />
// TodoAdd.jsx
// 2、點(diǎn)擊enter鍵:有值就確認(rèn)增加
_onKeyUpEnter(e) {
if (e.keyCode == 13) {
this.confirmAddItem()
}
}
// 3、失去焦點(diǎn):有值就確認(rèn)增加
_onBlurEnter(e) {
this.confirmAddItem()
}
// 4、確認(rèn)增加,調(diào)用父組件的回調(diào)函數(shù),傳遞參數(shù)
confirmAddItem() {
if (this.state.title) {
this.props.onAddSubmit(this.state.title) //把新增的內(nèi)容通過(guò)props傳進(jìn)來(lái)的回調(diào)函數(shù)告訴父組件Todo,有新的內(nèi)容來(lái)了
// 置空當(dāng)前
this.setState({
title: ""
})
}
}
其他:上面這個(gè)簡(jiǎn)單的父子組件的通信過(guò)程和es6模塊化通信非常類似,只是react做了優(yōu)化,比如上面的使用es6來(lái)模擬如下,只是做了通信模擬:
// Todo.js 父模塊
import TodoAdd from "./TodoAdd"
import TodoList from "./TodoList"
class Todo {
constructor() {
this.list = []
this.TodoAdd = new TodoAdd({
// 父模塊給子模塊的回調(diào)
resetList: (content) => {
if (content) {
this._updateList(content)
}
}
})
this.TodoList = new TodoList({
list: this.list,
})
}
_updateList(content) {
this.list.push(content)
// 調(diào)用子模塊的方法更新內(nèi)部列表
this.TodoList && this.TodoList._getNewList(this.list)
}
}
module.exports = Todo
// TodoAdd.js 新增子模塊
class TodoAdd {
constructor({
resetList,
}) {
this.resetList = resetList
}
_onSubmit(str) {
if (str) {
// 1、告訴父模塊新增了
this.resetList(str)
}
}
}
module.exports = TodoAdd
// TodoList.js 列表子模塊
class TodoList {
constructor({
list,
}) {
this.list = []
this._getNewList(list)
}
// 3、監(jiān)聽(tīng)父模塊是否要更新
_getNewList(newList) {
this.list = newList
// 其他操作
}
}
module.exports = TodoList
以上所述是小編給大家介紹的React中的todo-list ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
react中useState使用:如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)
這篇文章主要介紹了react中useState的使用:如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
React中的useMemo 和 useEffect 執(zhí)行順序
在 React 組件的渲染過(guò)程中,useMemo 和 useEffect 的執(zhí)行順序是不同的,本文給大家介紹React中的useMemo 和 useEffect 哪個(gè)先執(zhí)行,感興趣的朋友一起看看吧2025-01-01
TypeScript在React項(xiàng)目中的使用實(shí)踐總結(jié)
這篇文章主要介紹了TypeScript在React項(xiàng)目中的使用總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04
基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面的實(shí)例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04
關(guān)于react中列表渲染的局部刷新問(wèn)題
這篇文章主要介紹了關(guān)于react中列表渲染的局部刷新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
react實(shí)現(xiàn)同頁(yè)面三級(jí)跳轉(zhuǎn)路由布局
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)同頁(yè)面三級(jí)跳轉(zhuǎn)路由布局,一個(gè)路由小案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
react基于react-slick實(shí)現(xiàn)多圖輪播效果
React slick是一個(gè)使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07

