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