最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解React中的todo-list

 更新時間:2018年07月08日 10:27:25   作者:逗伴不是瓣  
這篇文章主要介紹了React中的todo-list的相關知識,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧

基于React的一個簡單Todo-list

先賭為快:在線DEMO,感覺還不錯點一下star  -_- ~

源碼地址

一、已經(jīng)完成的功能

1、新增選項(默認未完成)

2、完成狀態(tài)可以切換

3、當前選項可以刪除

4、全部選項選中狀態(tài)切換

5、全部個數(shù),完成個數(shù),未完成個數(shù)實時讀取

6、刷新狀態(tài)不變

7、雙擊可以編輯(有個坑:雙擊編輯內(nèi)input的keyUp Enter保存會連帶觸發(fā)blur失去焦點保存。已解決:通過設置一個可以保存的狀態(tài)控制)

二、待完成(新增路由)

三、目錄結構

3.1、主要邏輯只涉及:Todo(父組件),TodoAdd(輸入框子組件一),TodoList(選項列表子組件二)

3.2、父子組件通過props(可以是自定義屬性、對象、回調(diào)函數(shù))通信,每個組件都有自己的state,可以通過setState改變當前的state。

例如:新增的時候,父組件是如何知道新增了一個什么內(nèi)容呢?如下:

// Todo.jsx內(nèi)   
//1 傳遞給子組件的回調(diào)函數(shù),只要有心得內(nèi)容傳遞過來,就更新當前的:list。list只要更新,通過props傳遞給TodoList的data就會更新,DOM就會新增一個選項列表
  onAddSubmit(addTitle) {
    console.log("增加了:" + addTitle)
    let addItem = {
      title: addTitle,
      isFinished: false
    }
    this.state.list.unshift(addItem)
    this.setState({ list: this.state.list })
    this._saveToSession()
  }
// 通過props傳遞給子組件(等待使用)
<TodoAdd onAddSubmit={this.onAddSubmit} />

// TodoAdd.jsx
// 2、點擊enter鍵:有值就確認增加
  _onKeyUpEnter(e) {
    if (e.keyCode == 13) {
      this.confirmAddItem()
    }
  }
  // 3、失去焦點:有值就確認增加
  _onBlurEnter(e) {
    this.confirmAddItem()
  }
  // 4、確認增加,調(diào)用父組件的回調(diào)函數(shù),傳遞參數(shù)
  confirmAddItem() {
    if (this.state.title) {
      this.props.onAddSubmit(this.state.title) //把新增的內(nèi)容通過props傳進來的回調(diào)函數(shù)告訴父組件Todo,有新的內(nèi)容來了
      // 置空當前
      this.setState({
        title: ""
      })
    }
  }

其他:上面這個簡單的父子組件的通信過程和es6模塊化通信非常類似,只是react做了優(yōu)化,比如上面的使用es6來模擬如下,只是做了通信模擬:

// 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)聽父模塊是否要更新
  _getNewList(newList) {
    this.list = newList
    // 其他操作
  }
}
module.exports = TodoList

以上所述是小編給大家介紹的React中的todo-list ,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

相關文章

  • react中useState使用:如何實現(xiàn)在當前表格直接更改數(shù)據(jù)

    react中useState使用:如何實現(xiàn)在當前表格直接更改數(shù)據(jù)

    這篇文章主要介紹了react中useState的使用:如何實現(xiàn)在當前表格直接更改數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React中的useMemo 和 useEffect 執(zhí)行順序

    React中的useMemo 和 useEffect 執(zhí)行順序

    在 React 組件的渲染過程中,useMemo 和 useEffect 的執(zhí)行順序是不同的,本文給大家介紹React中的useMemo 和 useEffect 哪個先執(zhí)行,感興趣的朋友一起看看吧
    2025-01-01
  • TypeScript在React項目中的使用實踐總結

    TypeScript在React項目中的使用實踐總結

    這篇文章主要介紹了TypeScript在React項目中的使用總結,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04
  • React中useState的理解和使用案例

    React中useState的理解和使用案例

    Hook是React16.8的新增特性,它可以讓你在不編寫class的情況下使用state以及其他的React特性,本文中講解的useState就是React中的其中一個Hook,這篇文章主要給大家介紹了關于React中useState理解和使用的相關資料,需要的朋友可以參考下
    2024-03-03
  • 基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼

    基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼

    這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04
  • 關于react中列表渲染的局部刷新問題

    關于react中列表渲染的局部刷新問題

    這篇文章主要介紹了關于react中列表渲染的局部刷新問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React中如何使用scss

    React中如何使用scss

    這篇文章主要介紹了React中如何使用scss問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局

    react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局

    這篇文章主要為大家詳細介紹了react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局,一個路由小案例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • 在React 組件中使用Echarts的示例代碼

    在React 組件中使用Echarts的示例代碼

    本篇文章主要介紹了在React 組件中使用Echarts的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • react基于react-slick實現(xiàn)多圖輪播效果

    react基于react-slick實現(xiàn)多圖輪播效果

    React slick是一個使用React構建的輪播組件,下面這篇文章主要給大家介紹了關于react基于react-slick實現(xiàn)多圖輪播效果的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07

最新評論

镇雄县| 襄城县| 竹溪县| 大丰市| 西盟| 胶州市| 寻乌县| 武义县| 横山县| 清水河县| 岢岚县| 东方市| 石楼县| 沈丘县| 丹寨县| 新泰市| 苏尼特右旗| 甘谷县| 宣威市| 清涧县| 高碑店市| 西盟| 新宁县| 德惠市| 共和县| 福建省| 晋城| 柳州市| 新营市| 涪陵区| 游戏| 迁安市| 陈巴尔虎旗| 芮城县| 商都县| 桂平市| 麻栗坡县| 乐东| 泉州市| 平武县| 巴青县|