11_尚硅谷_组件组合使用_交互.avi原创

下面我们就真正要做交互了，来做交互，从绑定监听开始。绑定监听不可这八层板面吗？绑定什么监听呢？On click大国。This，取个名字。叫什么？啊，就爱吧，行吧，就这个爱啊，好。或者你写个hand也行啊，这个下步该怎么做？固定的跟他说啊，先把这个方法写上。呦，这个东西出来，估计他是这个这哥们，他写了他的问题啊，你老是。啊，如果我这么写，大家想行吗？行不行不行啊，这个得说一个事啊，大家看到回过回来看一下，大家看着我啊，大家看到啊，如果一旦你写上了一个大括号。

你必须写一个什么，Return？因为如果你没写大括号之前，我这个箭头其实有两个作用，一个代表函数，一个代表返回return。它同时起了两个作用，但是一旦你加上大括号以后呢。那这个大括是什么意思？是函数体积？不懂，你要函数，你这么写有吗？没有return，所以你必须写个什么return。看着吧，这个要注意啊。好，再来看看它是不是能好一点呢，啊，这工具看一眼，嗯，看了是不是不犯错误了。Up。下面啊，我们一旦定义了一个新的函数。你得先干一件事情是吧？啊，在这个构造系里面是不是要做点事？看是固定的写法prop，其实这个写起来也挺烦的，其实有简单的写法，不过我们先把复杂的写法多写写啊。

后面再说简单的解吧。Purpose，因为你只有写过复杂的，你才知道体验到简单的它的好的地方，啊啊，Z时间I等于Z时间i.bed谁固定的？啊，都是套路啊。好，那写好它们以后啊，下面我们最终要在爱的方法里面。是不是就干这个事？把他的数据要添加到什么。Todo里面去对吗？但是啊，现在也就是说我们希望在子组件里面是不是改变父组件的状态啊，这里又存在一个问题啊。问题啊，这个地方啊，需要在子组件中。

改变啊副组件的状态，这个是挺费劲的，为什么说挺费劲的，你想啊，我现在人要改变状态，必须调用一个方法，叫this set。对吗？但是你能在这里面下内吗？不可能吧，你想嘛，我们必须晒在他的state才行，对吗？因为状态是不是在它里面呢？所以我在子组件里面能直接改变父子源状态吗？不能，这个要强调一个事情，子组件中不能直接改变父子键的状态。啊。首先你要知道一个事情啊，直组件中不能直接改变副组件的状态。那怎么解决呢是吧。

这个有一种解决办法，我直接说结果啊，OK。好，这个地方我要跟大家说一句话，说句非常重要的话啊，状态在哪个组件，在哪个组件啊。啊，更新状态的行为就应该在哪个组件，就应该定义在哪个组件，好，我问大家行为指什么。就是一些函数，就是一些方法。N了吧，好看到啊。也就是说什么意思，我这里面是不是有一个todo的状态，我是不是要对这个todo添加一个todo的一个操作，譬如说我有一个操作叫爱的什么todo。也就是说，这个行为必须定义在当前这个主页。大象你添加一个todo，要不要接收参数？

要不要那肯定要啊，你想想你set一个A级，你是不是要传一个A进去。对吧，接受一个九度。看到吧，好，那我最终是要把这个to two塞到这个里面来，对不对？好，那看到我看我先写一个错误的写法，看看答案啊，能不能看出来啊，this.state.to lose。爹。啊，因为要放在最前面嘛，所以不能用push。用什么呢？On shift左右这样对吗？在更新状态吧。哎，我们说过一个事情啊，不知道还记不记得啊，就是要想更新状态，你不能直接更新，必须调用什么set state。说实话，如果你后面再学过view，我们后面学的一些框架，他们俩很多地方有相似的地方，你你学过view以后，你就觉得这种写法特别挫，说实话特别费劲。

但是还必须得这么写啊，不能这么做啊，记住了，不能这么做。那得怎么做呢？看到我先取出啊，To。这个怎么去this state够了对吧，接着呢往里面。是不是on shift一下。够了吗？放进了吗？好了吗？最后要要说一下叫更新什么状态，This set，你只有调用了这句话，才叫真正的更新的状态。接着查一个对象，对象里面放什么。To。大家会发现啊，我到处在用ES6的语法，大家要习惯啊。

能不能看到。啊，也就说最后你即使你把这个做了，你要不写set，它是不会去更新界面的。你必须调用set，相当于有一个统一的出口去更新状态的出口就是。好。这一个方法是定义在父组件的吧，但是谁来调用这一个方法？是不是子组件的。能不能啊，OK，那现在有个问题了。指间看得到吗？看不看得见？看不见他哪看得见怎么办？圆型这一个是，这不是它们俩不是那种继承关系啊，这个这个父组件子组件是说的是位置关系。那么呢，标签我我外面有一个div，里面有一个div，那这个外部的div就是里面这个div的副标签，那他们继承关系吗。

不是，是位置上的父子关系，就是嵌套关系。这么懂啊，OK，咋办？这个地方你要理解一个东西，函数它也是数据吧。能不能，你能传递一般数据，那函数也一样可以传递。你说那不费劲吗？传递函数飞机吗？会不会进，我就说我我传一个我传一个ABC啊，就是传一个笔记本的数据嘛，这没问题是吧，大家都懂，我现在传递一个函数，就总感觉我这函数是不是有点大呀。传递的是引用。怎么飞机呢？他比那个传递基本数据可能还要更更轻松一点，因为他就是个例子。懂吗？啊，我说是传，我们平常说要把这个函数传过去，实际上传递的是它的引用，能懂不好看。

那此时啊，此时我们应该干嘛呢？这个是不是需要啊是吧，需要吗？需要需要传过去啊，怎么传。接着。看懂吗？你你前面你这个看能传，凭什么我就不能传呢。可以穿的。能不能看到啊，最好名字一致，因为名字一致不容易犯错误，虽然说这个名字一定要一样吗？这两个人的名字不一定，我写了也行，但是这样容易犯错误，知道吧，都一个名字，你就不容易犯错啊，OK。啊。没需要写个什么类。你要这么不写this点，那它会叫当前作欲找吧，有吗？没有，只有哪里有？

组建对象啊。你定义在这个里面，就在组件对象里面能看到吧，好，那写好它之后呢。那也就是说我给这个爱的组件是不是新增了一个新的属性，我先你不要去用，先要什么声明。一下，哎，我接受一个新的属性对不对，下面写什么pro点。方，它不是方，他的名字好像叫fun。啊，还是这个我还有点忘啊，是叫fun还是叫func，我们来看一下那个文档啊，看一下文档，文档里面应该会有说明是吧？呃，看一下那个文档啊，文档里面呢，有这个的检查。呃，看一下它里面没有。这是这是什么啊，还提名func是吧？

这不是故意的，我确实没有记得太死。点什么？Is required？能看到吧，好，那也就是说我现在的这一个方法，我在这边艾特里面是不是可以用了，好可以用那一步来啊，你要艾它，你要调用这个函数，这个函数是不是接入参数啊。要不要接着参数I的todo，要不要要他要接受一个todo的一个字符算法，那todo字符在哪呢？那你想你这个爱的有一个什么流程呢？大家想想看，先得干嘛？第一步啊，读取啊输入的数据对吧，能看到吧，读取输入数据，再一个第二步啊，如果你做的好一点，你先得什么检查它的合法性。

真的哦，如果你要做的好一点的，你想想你有可能没有没有添加，咔嚓一点添加有意义吗？没有啊，你不应该添加对不对。啊，检查合法性啊，那合法性检查就两种结果不合法，那是不是结束啊啊就不会添加对不对，下面就说如果通过了合法了怎么办，是不是要添加呀？啊添加好来下面。搞吧。那我这个该怎么做这个音input，我是不是要操作这个音input的啊，我们前面干嘛，是不是要去记住它呀，还记得怎么做吗？If啊，我们还是用那种比较好的方式啊，怎么写来着，写一个函数对不对，还记得吧，接收一个参数叫什么input。箭头。This时点input等于input，当然你也可以写别的名字。

能看到吧，啊，你这个里面可以写一个写一个todo input，这样会更好一点。能看到吧，啊，这个名字叫todo input，好，我要读这个字。看的。接着呢，啊，Todo等于。This todo value，我还来一个什么呢？什么意思，去两边的空格嘛。这样是不是做的比较严谨是吧，好，下面呢，检查合法性衣。土豆。啊，他是不是有可能是个空串呢？啊，我甚至可以这么写，看到我都懒得写空串。看。空，嗯，转成Bo值不就是Bo吗？

懂不懂？好，如果是负20，我该怎么做？那return你要再搞还可以搞个alert对不对啊就得了啊，你说我不添加。我也不跟你什么提示，反正就是不行。能懂吧，好，下面。下面说明什么？是不是合法了呀，合法该干嘛添加添加，关键是我调动谁来做添加的行为呢？To do。能看懂那怎么办？This。How did you do。它在哪一个里面呢，里面。是不是这意思，这是属性传过来属性。你要看你要操作的东西到底在哪个位置就是什么。穿什么穿too啊？

能不能看到啊。那。也就是说我们现在啊，啊，我们现在说需要在直属院改变副属性状态，我们最终的解决办法是什么？在附组件定义函数。传递给什么子组件，子组件去干嘛调用？这是不是解决方案相当于啊，OK，负组件定义什么函数对吧，传递给干嘛子组件。子乳液。调用。这是一个通用的解决方案。它一个固定的。啊，不会变。好来我们来看一下，看看我们当前的这个啊，行不行啊行不行得看了对吧。

看先看，你得先看啊。来，先看一看。我们先搞一下一点添加。是不是报错呀，报错说再说一个什么事了。啊，OK，他在这个todo of什么，Undein在那个什么。ADD todo里面吗？看这形式看到吗？好来看一下。哪里有？我没看到哪个是unde of of todo啊，说白了这什么意思，这个这个错误要看得懂，就是说我在一个unde上面去读什么todo属性。看懂这一个非常常见的一个抽法，就读某个属性of find。这个应该能推测出来是怎么回事。啊，什么问题。

应该估计19块钱，还是他的这个Z是不对的问题，对不对，我点慢啊。啊，那我要干嘛，是不是绑一下来绑啊，固定的固定的this点它等于。点他点的穿。能看到吧，好，现在我们来看一下是不是啊，对吧，不知道。但是这个好像跟我们的这个步骤还差一步，清除我们输入的数据对吧，来什么意思。啊在这里啊，在这里按里面我们添加，添加完以后啊第四步对吧，第四步看吗？清除输入。清除输入对吧，好办法。怎么？

等于啊，就空就行。这不就新出了吗？来看一下。是家上面，不是又想家上面吗？先看着吧，啊，OK，这样就好了。啊，OK，这一个其实啊，你你不要想太多，我跟大家说过一句话，什么时候需要去加那个这个棒的。只要是你定义的，你都给我加上我刚才说过这句话吧，你只要遵循这个事情啊，不管你有没有用认识，你先搞上，这样肯定就没问题。能不懂，因为你定义了这个方法不一定会用，那啥就可能会用，很有可能会用，但是一定要用吗？那也不一定，但是一般都会用，为什么呢？因为你的一个行为一般都会去更新状态去的啊，十有八九要用。

这个十有八九，可能还说的比例有点低啊，可能99.9%啊，所以最好上来就搞上。能懂吗？啊，不过我们后面要用上建筑函数，这种事情都不要做了。那现在啊，他理解不了进函数，我们就不能用啊，先放心用的。嗯，说实话啊，这个里面可能写的过程大家还有很多同学都跟上啊，还简单挺简单，但是真的让你写，说实话啊，这个还是有点小费劲。啊，你你现在再来看这代码挺多了。你你别想想看到这里面，我现在呃，二十五行到110行，这都写了多少行代码了。八九了吧。啊，对呀，那这80几行啊，代码你要想一次性啊，很轻松的写出来，还是有点小费劲的。但是才学编程嘛，你要都简单，那大家不都学会了吗？

对吧，就有一点难度，你学会了别人没学会啊，太爽了，但是有的同学。