功能化组件编码流程-2（延续上一章）

                

        我们在上一章我们实现了App组件通过props传递数据给List组件然后List组件通过props传递给Item组件然后渲染数据到页面上面，这是子父组件的传递方式，我们直接通过使用子组件的时候直接传递参数就直接保存到子组件的props中。

        上一章的Header通过回车添加新的state元素给App组件是子对父传输数据，根本思路是通过父给子组件传递函数，子组件调用函数来给父组件传递参数。

        

        这是父传递以及子调用函数发生的事情，确实父组件 的函数被调用后输出了传过来的参数，也就是数据从子到父传递成功。

        那么剩下的无法就是把输入的文本内容，以及id，以及done存到一个对象里面，然后把对象作为参数传回到App组件，通过添加onKeyUp键盘事件，注意keyCode 13 是回车，然后事件发生的时候传当前的参数给App组件，然后App组件获取当前state，然后const newTodo = [todoObk,...todos] 然后this.setState({todos:newTodo})更新当前的state，完成了回车添加新的Item。

        下一个是每一个todo设置一个交互，鼠标悬浮在吃饭，todo应该高亮，显示删除按钮。

        我们知道，当鼠标悬浮以及离开的时候，我们首先要添加事件，通过事件的发生来设置一个布尔值，也就是悬浮的时候样式显示是true，布尔值为false的时候样式又是另一种。

        

        onMouseEnter事件 当鼠标悬浮的时候执行函数 handleMouse，后面同理，然后当前者传过去的true，后者是false，那么我们函数接收的布尔值，我们就需要设置一个state来接收布尔值，然后通过这个state数据来判断样式的显示。

               

        

        这里我们发现控制台直接显示出了true 和false说明2个事件默认直接发生了，因为我们设置的函数有参数之后直接自己调用了，所以直接执行了。我们这时候就需要让函数调用之后返回的仍然是一个函数，那样就可以等待事件发生执行。

        

        这样就可以达到我们的目的了，然后这里flag是我们当前鼠标移入移出的值，我们就可以通过在Item组件设置state={Mouse:false}然后通过setstate来更新 state为当前flag，然后通过三元判断样式来区分悬浮和离开后的颜色变化以及删除按钮的显示。

        

        

        加上了这个之后呢，我们就给勾选 与done数据连接起来，通过是否勾选来更改当前todo对象里面的done，通过这个来删除已完成任务的时候确保是我们完成的任务

        那么勾选未勾选的事件是onChange。通过onChange来触发函数。

        

        

        这里不是value因为checkbox对应的是checked显示是否勾选（true）/（false）。

        这里实现思路是List改变done的值然后传给App组件，那么和Header组件传state给App是一致的，首先App传函数过来，Item调用函数传回当前的id以及done来改变当前id以及done的值。

        

        现在是通过点击对应的删除按钮删除当前id对应的todo对象。

        

        这里的filter函数是筛选数组里面的元素，这里定义的方法是返回 对象id不等于传过来的参数id也就是点击事件发生的id，全部筛选出来也就是变相的去除掉了点击事件发生的id对应的state

        但是现在点击删除之后之直接执行回调函数可能容易导致用户错误删除，我们用window.confirm自带的判断，如果确认就执行取消就不执行，这样删除功能就实现了

        

        这些功能的实现核心思路是关于数据在组件之间的传输，也就是根本所有的功能都是基于改变当前App组件下的state 数据，也就是通过改变数据来实现页面渲染的动态变化。

        知识点，高阶函数，以及filter 函数，筛选数组，以及三元表达式，以及keyCode，等等都可以通过这个案例来练习到，以及我们在开发中实际处理数据传输的思路，思路就是开发某个功能的前提，也是工程师的核心。

        还有一个nanoid库，自带一个nanoid方法使用后可以随意生成id，渲染多个组件重复使用的时候一定要有key值，方便找到对应的元素或者标签进行数据或者样式改变。