React之todo-list

2018-07-09 13:47:28来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

基于React的一个简单Todo-list

先赌为快:在线DEMO,感觉还不错点一下star  -_- ~

源码地址:

一、已经完成的功能

1、新增选项(默认未完成)

2、完成状态可以切换

3、当前选项可以删除

4、全部选项选中状态切换

5、全部个数,完成个数,未完成个数实时读取

6、刷新状态不变

7、双击可以编辑(有个坑:双击编辑内input的keyUp Enter保存会连带触发blur失去焦点保存。已解决:通过设置一个可以保存的状态控制)

二、待完成(新增路由)

三、目录结构

3.1、主要逻辑只涉及:Todo(父组件),TodoAdd(输入框子组件一),TodoList(选项列表子组件二)

3.2、父子组件通过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

// 2、點擊enter鍵:有值就確認增加
    _onKeyUpEnter(e) {
        if (e.keyCode == 13) {
            this.confirmAddItem()
        }
    }
    // 3、失去焦點:有值就確認增加
    _onBlurEnter(e) {
        this.confirmAddItem()
    }
    // 4、確認增加,调用父组件的回调函数,传递参数
    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) {
            // 1、告诉父模块新增了
            this.resetList(str)
        }
    }
}

module.exports = TodoAdd
// TodoList.js 列表子模块
class TodoList {
    constructor({
        list,
    }) {
        this.list = []
        this._getNewList(list)
    }
    // 3、监听父模块是否要更新
    _getNewList(newList) {
        this.list = newList
        // 其他操作
    }
}

module.exports = TodoList

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Angular使用总结 --- 如何正确的操作DOM

下一篇:koa2实现拦截器进行登录前session校验