Todos案例（三）02-Footer列表过滤——打印数据信息-e.target.dataset & 更新当前的筛选条件进行显示

Footer列表过滤——打印数据信息-e.target.dataset & 更新当前的筛选条件进行显示

• 过滤不同的任务类型列表

<ul onClick={this.handleFilter} className="filters">
  <li>
    <a data-id='all' className={currentType==='all'?'selected': ''} href="#/">全选</a>
  </li>
  <li>
    <a data-id='will' className={currentType==='will'?'selected': ''}  href="#/active">未完成</a>
  </li>
  <li>
    <a data-id='done' className={currentType==='done'?'selected': ''}  href="#/completed">已完成</a>
  </li>
</ul>

打印数据信息

handleFilterData = (e) => {
    console.log(e.target.dataset)
   // console.log(e.target.dataset.id)   //显示 all、will、done
}

显示

封装方法

  handleFilter = (e) => {
    // 更新当前的筛选条件
    let id = e.target.dataset.id
    if (!id) {
      // 没有id，什么都不做  总类一：清空操作
      return
    }
    this.setState({  //非清空操作-包括：未完成、已完成、全部
      currentType: id
    })
  }

handleFilterData = () => {
  let { todos, currentType } = this.state
  return todos.filter(item => {
    if (currentType === 'all') {
      // 全部列表
      return true
    } else if (currentType === 'will' && !item.done) {
      // 未完成
      return true
    } else if (currentType === 'done' && item.done) {
      return true
    }
  })
}

调用方法

  render() {
    let {
      todos,
      etitle,
      isAll,
      currentType
    } = this.state
    // 根据当前筛选条件，过滤出列表数据
    todos = this.handleFilterData()
  }

显示效果

1、未完成

2、已完成

3、全部