学习React之旅--写一个todoList

在上次文章中提到，我会学习React的基础和ant-design的一些组件，并且使用htmls5的web Storage实现一个todoList。

todoList的功能

1. 写item：写入title及content
2. 使用checkbox勾选item，表示这一项内容已做，item项的内容需要划掉
3. 更改item中的content内容
4. 删除某一项item
5. list需要存储起来，下次访问这个页面的时候会展示之前的数据

现在完成的效果图如下：

布局是使用的ant design中的栅格布局，与BootStrap栅格布局里的相似诶。

数据存储选择的是存在localStorage里。

因为本人对色彩搭配的知识有所欠缺，所以直接在Color hunt网站上找的一组配色。

git动图是一个ScreenToGif的应用程序制作的。

---

小结：

通过本次小练习，大概了解React一些基础，希望以后能够更加深入的学习。

TodoList源码地址：https://github.com/cindyHua901/TodoList

效果不是很满意。后续应该还会修改，并且存在小bug。

待完善：

• 当删除某一项内容的时候checkbox的值没有更新正确。。。这个问题待解决。(已解决 )
• 另外还有分页功能也可以添加。
• 做一个选择框选择出所有完成或未完成的列表。
• 那个修改的弹窗也很丑，应该会改为Modal组件再修改一下样式。