00:00
来,我们继续啊。下一个咱们要做的功能是当我鼠标进来之后,点击删除按钮可以把它删掉啊,那现在呢,我们也是,但是我们点它没有效果是吧。哎,那数据呢,仍然在我的APP组件当中,我们还是来看这个图啊,数据仍然在我的APP组件当中,我换一个颜色。这个吧。在这儿呢,数据仍然在这儿,但是呢,当我去点删除按钮的时候,删除按钮在我的item当中。是吧,点击删除按钮,把我APP组件当中的土豆土DOS数组里边数据给它删掉,那怎么做呢?那数据在哪我就在哪,写删除数据的方法,并且把最终啊最终最终。我干嘛呢,把这个方法给它传到item组件里边去。当然这个时候传可不是直接传啊,是通过APP组件先传到list组件,然后再传到什么呢?Item组件就可以了啊,这个组件乱回头咱们再换一个啊。好,现在思路既然有了,咱们开始写代码。注意看啊。那我就在这个位置再来一个什么呢?删除数据的什么呢?方法cost。
01:04
Cost,然后再来一个de delete todo等于括号,那我删除数据,从数组里边删数据,这样啊,从数组里边删除数据,给我一个索引吧,我们按照索引的方式来删除数据,所以说这块需要一个一个index,那它的类型应该是什么类型呢?Number类型对不对?好,怎么删,我们来看怎么删,无非就是通过state找到我对应的读do词,然后从里边sppla里边给我传入所引,并且传入个一。那这个是删除数据的方法,但是这个方法不是在这用的。Return出去在哪用给list这个组件。啊,给这个组件,并且再从这个组件里边传到哪儿。组件里边得先去接收一下啊。在这里边儿。那这边这么接受啊。并且在这个绿色组件里边传到我的item组件当中。
02:02
强制数据绑定方式传进来了,那我的item组件里边要用到这个方法怎么办?还是pro里边去接受?嗯,这个位置啊,我稍微改一下。Type啊,然后呢,再来一个re e q u I啊,最好是给它这么规定一下,不容易出现问题啊。后边应该还有一个什么方法呢,叫做delete todo。Item组件当中去用。啊,它也是一个对象,然后呢,Tap。Func提要问re e qqu ID这个是出好搞定。我这里边用什么时候用,注意我是点击按钮的时候去用,所以说在这块给他来一什么呢?艾特CL等于Del。土豆吧。啊,Dl item也行,土豆吧。我把这个方法复制回来,我需要在点击事件当中啊,点击事件时候需要这么一个回调,那我现在没有怎么办,依然是给我扔出来。
03:03
好,那当然了,我在这边肯定应该是有一个删除数据的方法。号,它等于。注意做什么事情?这是我们重点关注的问题啊,做什么事情?我们是要删除数据,我们是要点击这个按钮的时候,把当前这个数据给它删掉。而且我在组件这边也已经接收到了负极组件给我传递过来的一个delete todo,问题就是我在我当前这个setup当中,或者说这个方法里边怎么去调这个方法呢?能想到吗?啊,其实很简单。直接通过我当前setup里边的PP参数就可以。Props这个参数当中可以拿到props声明接收的数据是不是好?当然啊,一般情况下我们在做删除的时候,最好有一个什么提示,来一个A括号window点。啊,里边写上一个确定要,嗯,纳尼确定要删除吗?啊,加上一个问号是不是,如果确定要删除了,好TS.delete todo调这个方法,并且。
04:13
把当前的索引给它传递进去。对不对?好,问题来了。索引在哪儿?是不是我也没看到,所以呢。那怎么办?我们来看。List里边在遍历item的时候,里边有没有索引?有,既然如此,好,这么干,冒号does。把当前的每个数据的声音给他传递过来,那既然是这个样的话,那我item组件这边就可以去接受。那那我就在这接受,在这接受吧,有个index,那注意它的这个类型是什么,是number类型。Re qqui,并且也是一个出B过出I,否则容易有问题是不是好,那所以既然已经有了,那我这个位置怎么拿呢?OV还是通过s.inex这不就可以了吗?
05:03
格式化保存。这边有格式化保存,这边还是格式化保存。我们再来看一下能不能做删除操作。哦,这边好像有什么问题是吧,我刷新一下。好了可以了,然后注意我一点。取消我一点删除,一点删除一点删除,OK,没有问题,刷新。我从第一个开始删,删掉它,删掉它,再删掉它,没有问题。好,我再从第二开始算。删掉它啊,删掉它。然后再删它也没有问题啊,为什么测试这么多遍呢?因为同有同学可能会想诶。老师,你的这个item当中,这个位置用到了props.delete TODo.index那我可不可以从哪呢?从这个props里边去解构出来这个delete to度和这个可以你试试。啊,回头有问题再改回来。好,那这块呢,咱们刚刚讲的是删除数据。
我来说两句