首页 > 网站 > 软件应用 > 正文

详解React中的todo-list

2024-09-06 19:17:04
字体:
来源:转载
供稿:网友

基于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

以上所述是小编给大家介绍的React中的todo-list ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表