一个简单的demo
初学React,方式无外乎是去慢慢的啃官方文档,就和啃一个白馒头一样,不配点料的话早晚会把自己噎死。
所以边啃文档再抹上点demo就很有必要,既能助消化,也能回味无穷。
todoList
这是一个很常见的demo,功能就是简单的增删操作,但里面包含了React中诸多概念,事件处理、条件渲染、列表&Key等。最终效果图如下。
搭建文件
这里我用的是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上看源码