TodoList案例(React版)

 todoList案例相关知识点
        1.拆分组件、实现静态组件，注意：className、style的写法
        2.动态初始化列表，如何确定将数据放在哪个组件的state中？
                    ——某个组件使用：放在其自身的state中
                    ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
        3.关于父子之间通信：
                1.【父组件】给【子组件】传递数据：通过props传递
                2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
        4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
        5.状态在哪里，操作状态的方法就在哪里

下面为大家列出我写这个案例的详细步骤。

1、静态组件的拆分，这一步需要大家不慌不忙，一步一步的去完成。

2、展示动态组件，把App.js文件里面的静态数据传递给List

List组件接收并遍历，把结果传递给Item组件，这里用todo.id，添加了key

Item组件接收传递过来的每一个Item，并把其展开，这里用defaultCheack，是可以修改的，但是这里defaultCheack有一个缺陷，下文会提出，这里用defaultCheack是增加知识点的运行。使自己了解充分

3、添加Todo

首先获取头部input的框的输入内容，然后App组件给Header组件传递一个函数，这个函数能接收一个todoObj，然后Header组件在按下回车键的时候调用了App传递给自己的函数，然后把todoObj交给了App，这里用了nanoid库给自己新增的Item生成了随机唯一id。同时这里也对输入内容为空进行了提示，并且按下回车键后清空了输入框的内容

App在拿到这个todoObj之后把它放在了自己的状态里，引起了自身状态的更改，进而调用了自身的render，而List是自己的子组件，就引发了自己子组件的重新渲染。然后东西就被渲染到了页面。

当输入为空

4、鼠标移入效果，鼠标移入，添加背景颜色，显示删除按钮，鼠标移除，恢复样式

 这里让鼠标移入和移除对应一个函数（里面返回一个函数，即高阶函数解决调用函数的为undefind），传递不同的布尔值，然后更新state里面的状态，下面的样式用三元表达式，判断显示或者隐藏

5、让勾选和取消勾选的状态在App组件中更新

在Item组件中调用App组件updataTodo时，把当前的id以及对应复选框的勾选状态传给app

在App里面写函数传递给List组件，在App组件的updataTodo中判断传递过来的id是否与遍历出的todoObj中的id相当，如果有，更改其done值，如果，没有，返回原来的值。

List组件接收后不用，直接传递给Item组件

 

6、对props进行类型以及必要性的限制

7、删除一个todo，这里先给按钮添加一个点击事件，这里在删除之前进行了提示，如果用户点击确定，则把id传递给App。

在App.js文件中定义删除一个Todo的回调，这里将传递过来的id与原来todo里面的id做对比，过滤出与原来id不同的，并将其传递给List ，

在List中声明接收，同时对其类型进行了限制，并将其传递给Item组件 

 

8、底部功能实现

把todos整体和checkbox的选中函数传递给Flooter组件，这里checkbox的选中函数通过Flooter传递过来的done对其复选框进行了更新

这里要把Item组件里面的defaultchecked改为checked，因为defaultchecked只生效一次

 计算出todo.done为true的个数，和总数，当两者相等并且总数不会0的时候让最下面的复选框为选中状态，并把当选复选框的选中状态传给APP组件，让其更新每一个复选框的值。

 

 

9、清除所有已完成

首先给按钮添加点击事件，里面直接调用App组件传丢过来的函数

 

返回出done值围殴false的选项

  至此，整个ToDoList案例的React版已经编写完成，希望有兴趣的小伙伴可以练习一下，有不懂的也可以DD我。