用React写一个简单的todoList

2,814 阅读2分钟

一个简单的demo

初学React,方式无外乎是去慢慢的啃官方文档,就和啃一个白馒头一样,不配点料的话早晚会把自己噎死。

所以边啃文档再抹上点demo就很有必要,既能助消化,也能回味无穷。

todoList

这是一个很常见的demo,功能就是简单的增删操作,但里面包含了React中诸多概念,事件处理、条件渲染、列表&Key等。最终效果图如下。

Github地址

搭建文件

这里我用的是react的脚手架,很适合做一些小的练习,也方便。

npm install create-react-app
create-react-app demo

目录如下

目标功能

不管是做一个什么项目,都先要搞清楚我们的项目要干什么

  • 任务的展示

  • 点击后可将任务标记,再次点击任务取消

  • 添加任务,删除任务

  • 完成任务数,任务总数

开始

随便写几条起始数据

  data: [
      { id: 1, content: '吃饭', complete: false, },
      { id: 2, content: '睡觉', complete: false, },
      { id: 3, content: '学习', complete: true, },
    ]

设计主体列表

            this.state.data.map((value) => { 
              return (<div
                key={value.id}
                className={value.complete ? 'click' : 'unClick'}
                onClick={() => this.handleClick(value.id)}
              >{value.content}
                <span
                  style={{ float: 'right', color: 'gray', fontSize: '10px' }}
                  onClick={(e) => this.handleDelete(e, value.id)}
                >删除</span>
              </div>)
            })
          }

除去事件外,现在已经可以看到一个完整的列表,这时我们思考一个问题,当点击‘删除’时,当前列表是否能被删除

往下看点击修改状态函数

  handleClick = (id) => { //更改任务标记状态
    let newData = this.state.data.map((v) => {
      if (v.id === id) {
        v.complete = !v.complete
        return v
      }
      return v
    })
    this.setState({
      data: newData
    })
  }

将点击的列表下的属性‘complete’修改,以达到标记的目的

之后时删除函数

  handleDelete = (e, id) => {
    let newData = this.state.data.filter((v) => v.id !== id)
    this.setState({
      data: newData
    })
  }

此时我们可以尝试下删除操作能否正常进行

答案是否定的

我们看‘删除’的span标签,存在在列表的div下,因为事件的冒泡机制,当我们点击删除操作后,先会触发handleDelete修改了data,但紧接着它又触发了handleClick,把data又修改回来了

为了解决这个问题,我们可以在删除函数的首行加上 e.stopPropagation(),用来阻止事件冒泡

之后的添加函数在此不在多赘述,很简单,大家可以去我Github上看源码