详解React中的todo-list

// 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: ""
      })
    }
  }

// 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