React之todo-list

基於React的一個簡單Todo-list

先賭爲快：在線DEMO，感受還不錯點一下star  -_- ~

源碼地址：

1、已經完成的功能

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

二、完成狀態能夠切換

三、當前選項能夠刪除

四、所有選項選中狀態切換

五、所有個數，完成個數，未完成個數實時讀取

六、刷新狀態不變

七、雙擊能夠編輯(有個坑：雙擊編輯內input的keyUp Enter保存會連帶觸發blur失去焦點保存。已解決：經過設置一個能夠保存的狀態控制)

2、待完成(新增路由)

3、目錄結構

3.一、主要邏輯只涉及：Todo(父組件)，TodoAdd(輸入框子組件一)，TodoList(選項列表子組件二)

3.二、父子組件經過props(能夠是自定義屬性、對象、回調函數)通訊，每一個組件都有本身的state,能夠經過setState改變當前的state。

例如：新增的時候，父組件是如何知道新增了一個什麼內容呢？以下：

// Todo.jsx內
        
//1 傳遞給子組件的回調函數，只要有心得內容傳遞過來，就更新當前的：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

// 二、點擊enter鍵：有值就確認增長
    _onKeyUpEnter(e) {
        if (e.keyCode == 13) {
            this.confirmAddItem()
        }
    }
    // 三、失去焦點：有值就確認增長
    _onBlurEnter(e) {
        this.confirmAddItem()
    }
    // 四、確認增長，調用父組件的回調函數，傳遞參數
    confirmAddItem() {
        if (this.state.title) {
            this.props.onAddSubmit(this.state.title) //把新增的內容經過props傳進來的回調函數告訴父組件Todo,有新的內容來了
            // 置空當前
            this.setState({
                title: ""
            })
        }
    }

其餘：上面這個簡單的父子組件的通訊過程和es6模塊化通訊很是相似，只是react作了優化，好比上面的使用es6來模擬以下，只是作了通訊模擬：

// Todo.js  父模塊
import TodoAdd from "./TodoAdd"
import TodoList from "./TodoList"

class Todo {
    constructor() {
        this.list = []
        this.TodoAdd = new TodoAdd({
            // 父模塊給子模塊的回調
            resetList: (content) => {
                if (content) {
                    this._updateList(content)
                }
            }
        })
        this.TodoList = new TodoList({
            list: this.list,
        })
    }

    _updateList(content) {
        this.list.push(content)
        // 調用子模塊的方法更新內部列表
        this.TodoList && this.TodoList._getNewList(this.list)
    }
}

module.exports = Todo

// TodoAdd.js 新增子模塊

class TodoAdd {
    constructor({
        resetList,
    }) {
        this.resetList = resetList
    }
    _onSubmit(str) {
        if (str) {
            // 一、告訴父模塊新增了
            this.resetList(str)
        }
    }
}

module.exports = TodoAdd

// TodoList.js 列表子模塊
class TodoList {
    constructor({
        list,
    }) {
        this.list = []
        this._getNewList(list)
    }
    // 三、監聽父模塊是否要更新
    _getNewList(newList) {
        this.list = newList
        // 其餘操做
    }
}

module.exports = TodoList