22_尚硅谷_练习1_评论管理_添加.avi原创

那你说我们。第三步的第一小步是不是搞定了？后面是什么，是不是做交互啊，交互啊，就两个字交互，这里面有几个交互。几个？这交互是什么意思，就是我进行什么操作，就页面会有什么变化，比如说啊，你不要跟我说输入也是个交互，这没什么好交互的，这咱就不用说了，其实也是交互啊，但是这种小的就过了，第一个添加，再一个就删除对吧，也说然后添加以后这个列表显示。你这添加添加好了，它就应该要列表显示对吧？啊，这个添加以后显示在列表里面，是添加要具备的功能。就一共两个。那我们先做哪个，先做一下添加吧，添加好做一点。嗯。来，我们说过了，做交互首先干什么？

绑定监听在哪个组件，我们现在写。这里你看到我们现在一个组件一个组件的做了哪个组件，哎。能看到吧，好，绑定监听再说，不管那么多。这是它这里面我要说一下事情，一个标签里面有两种属性，一种呢是HTML标签属性，一种是我们。React提供了一些属性，最好把静态的属性写在左边，把动态属性写在右边。哎，就说老师我就想把动态属性写在左边行不行也行，你要有个规律就行。啊，不管是写在左边还是写右边，你要有规律，说白了别人看就很清楚，左边都是什么，右边是什么。OK，好，来，我们这里面都写右边我的习惯啊，Uncle。对吧，This。点。

这一个是萨吧什么。提交。啊，或者叫汉上啊，这个名字比较经典。好，下面我是不是要写一个自定义的方法，好，要写一个自定义方法，前面我们前面都需要去办的，对不对，太白。啊，太烦了。箭头函数是最好的。等于。箭头。好了。不用办了。啊OK，因为现在建筑函数它是没有自己的this的，没有自己的看整个全啊，看这外围的Z啊，外围的this刚好就是组件对象。啊，以后基本上我们都这么做。那么明显这么做吗？

啊，OK，你爽都不想要，你想要什么？Right。啊，写法也没那么复近啊，只是大家第一次看着总感觉挺别扭的，写多了就好了。好，来。那一说我这么写以后我就不用写那个对吧，一大坨都不想写。来啊，下面我里面要告诉做什么呢？里面我最终是标去收集我这个输入数据，对不输入数据，最终我是不是要去更新我的那个数组。说白了，更新状态。还记得我能直接更新吗？不能啊，OK，是不是得传函数过来让我调换函数更新吗？好，先第一步收集数据啊，先收集数据再说。啊，后面才是更新状态对吧。

好，来收集数据，我们说有两种搞法，一种是你手动的收集。另外一种是什么？自动的收集，就是一共是受控组件，一个是非受控组件。他是不是建议我们用什么受控组件，那我们就用。那么好。来用吧，用的话那先得定义什么状态，你受控组件必须有状态来接收数据。能走吧，那我就来一个state，我也不用去写这个写我不想写。有两个吧，一个是用户名，一个是什么评论内容，那得了，来一个来一个user类，我说了最好跟那个数据名称最好一致，最好一样都一样是最好的开始是吧。没有空串是吧，还有什么content串。能不能看到这些初始化数据了啊，OK。

好，下面啊，就有一个事情要给要这个数据，我是不是要读这个数据啊，怎么读。啊，先要读这个数据，它它要显示这个数据，那么等于啊，是不是读它读这一个state里面的数据，那我这样，那我先给它什么，先取出来，既然他读嘛，User name content this列。那下面我就很简单了，对吧，而这一个是什么content。有没有看到？好，能看到下面是不是要给他绑定unchang的监听。是吧，因为这个比较长了，所以我就换一行。On嵌监听有没有看懂，那我下一步是不是要去干嘛去？是不是调用一个方法来去做呀？还记得吧，this.hand的陷阱。

是吧，看陷阱好来这个怎么办？写是不是又要自定函数，它等于括号箭头大括号，哎，里面它接受一个什么，还记得吧。能看懂吧，啊，那关键是现在现在有两个啊，这还这还不太好整啊，因为这个下面不也有焊的前景吗？这也是个麻烦事。能看到吧，那所以说所以说这个这个该怎么办呢？这两个能同时用吗。这不好整，是不是因为为什么？其实也可以想办法整，但是我们先不要搞那么复杂，其实现在就是两个安陷阱，这两个用同一个，主要是保主值都一样读，但是保存的值，保存的那个属性名不太一样，对不？

啊，所以啊，我们先啊先现在啊，看这个写一个name陷阱可以吗？呃，这个写一个什么content的陷阱，虽然说名字很长啊。后面我们会说怎么样统一成一个方法啊，先不搞那么费劲啊先虽然说多写一点，但是。比较好懂。能不能看到，呃，这个里面我们干嘛去啊，OK，就是去。想办法读到这个里面值是更新这个状态，能看到吧，好读到，也就是说我先要读到user name，最新的user怎么读？Even问的点target.value。最后，This set a state。是吧，大括号。

用呀，就刚好名字一致，最好一个一致的名字。能看到吧，这下面的差不多只是改成什么content对吧，妈的。能不能看到啊，OK，好。啊。那整好他们以后，后面的事情就好办了，对吧，我要收集数据，这个数据是不是就在这里面了，然后我要收集数据，最终最终最终是不是添加一个comment，那我收集数据并啊这里面有一个B封装成什么对象板的对象。到时候我就添加这个对象不就得了吗。能懂不好，这个其实水就是对象。啊啊，我需要一个对象，谁是common对象知道吗？不就是这个state吗？

这个state不就是common对象吗？现在是不是啊，设的common线里面不就是user和content吗？大家要注意啊，你这个名字不能随便瞎写。能懂不？你要写的别的名字就不是common对象了。Co有什么特点？里面不是username和content吗？这个能不能理解，这个非常关键啊，就是你怎么样省代码，就是写的更优良一点，大家看看。能看到啊，OK，那好了。下面更新状态，我能直接更新吗？不能，我得去干嘛呀，刚刚前面说过一句话啊，前面有一句非常重要的话。数据在哪个组件，更新数据的行为就应该定义在哪个组件，还记得吗？没网吧，那我应该怎么做？那就。我们现在是不是添加common的，那就应该添加的方法吧。

写一个呀，加爱comment呗。是吧，等于。先写上这个结构，再想我要不要传参数。穿什么？你想啊，我要添加矿，你说我穿什么是不是的吧，你添加矿，那你不会传矿过来，我才给你添加呀。这认了吧，好，下面流程固定的，先取出状态来。取出这个comment来，还是用这个方式？叫comment等于B。记得。把它添加进去啊，Comments。对吧，点on shift，因为是在第一位对不对，加。一个comments一个comment，别搞错了啊，接着了。

最后一步要做一步叫什么步骤更新状态嘛。对吧，This是对的，传什么。吗？看到不啊，前面这知是我就不写了，关键的地方我写写能不能看到，其实组织三步啊，先得到啊原本的状态，接着更修改状态内容，接着要更新状态。这一步，必不可少。好，这一个函数我自己用吗？不用我自己不用。交给哪个组件呢？交给他对不对，行不行，就这么写怎么写类似点它那它固定。是吧，下面我的这边是不是就可以调用，调用之前先得什么声明。写什么？

生命接受属性了代。Pro type是等于对象来个它是吧，这个时候我们要引入一些东西了，是不是import proper times are from proper tax。点是个什么？Func function是吧，Is required。是这样的吧，啊，必须的嘛。好，那也就是说我这一步。做什么？更新状态的调函数更新状态吗？认识你。点他船满了，他不需要了吗？其实还有一步需要做清除输入数据。

怎么说清楚啊，我们只要去修改状态就可以，对不对啊，This set state。对吧，哪一个括号来个大括号，我们的user name为多少空，我的content为多少空。看到吗？啊，这个应该能懂啊，只要我更新了这状态页面的输入框是不是就改变了，因为它读的就是我的状态了。它这里面的value不都是我的状态吗。能不能看到，嗯。那这样我们的整个添加就完成了啊好来看一看啊。看一看。是不是可以用是吧。

来一个ABC来一个。呃，好好，嗯。来，周立。很爽啊。其实这个跟我们前面做的没有太大两样，说实话我们前面做过类似的事情。只是我们现在效果好一点而已啊。好，那也就是说现在到现在为止，我们的这个添加就做完了，好，这个里面啊，都用到了一些新的一些语法，这些语法呢，都让我们的编码更加的看起来更加好。啊，其实是更加的好一些，这一共有三个啊，第一个就是怎么样添加给类组件内添加这个属性。怎么样给组件对象添加属性？现在我是添加state，当然我也可以添加别的啊，我也可以添加别的，怎么样解决this的问题？为什么建筑函数再也不用看了啊？

飞。有了这些东西之后，看再也不用写了，写啥呀，那东西写的没用。