09_尚硅谷_组件三大属性(3)_refs和事件处理.avi原创

好，我们已经研究了两个属性了，下面还剩一个。叫什么呢？啊，我们来看一下。啊，我们要做什么啊？啊，这里面也有一个需求，我们来看一下这上面，嗯。有没有啊？这里面有一个。懂吗？就是我在输入框里面输入了一个值，现在我点击按钮提示这个输入框的值，这个功能应该是很好做的是吧。这就是我在右边的输入框输了一个值，失去焦点的时候。就提示这个值两种情况啊。好。来吧，啊，先把我们能做的先做了啊，把组件定义出来，把组件标签渲染出来啊。啊，定义组件啊，渲染组件标签对吧，好。

来啊。当你不能确定你到底有没有状态的时候，那你就用泪。能不能到就是我我先没有分析，我也不知道，可能后面要设计有状态，或者说我也现在不确定，那你先用上什么，用上内，这样肯定就没有问题啊，写个名字。这个叫什么名字啊，这个他这就没有好的名字，因为这个这个功能。就整个这是个组件啊。如果你取不到好名字了，有一个通用的名字叫my component。啊，但真正写项目的时候，肯定是要有一个名字的，因为你做功能嘛，肯定是有意义的，就是我们现在是做测试来react。啊点component对吧，好，最后要有一个什么人，要有一个return啊return里面啊，假设这外围是一个是一个div。

对吧，里面应该是。两个input中间一个button是吧，这很好整啊，来一下input，好，这个得说一下，在HT写标签的时候，它这一个可以不写，还记得吧，就是结束标签可以不写。可以吧，可以是可以的，但是。在里面必须有结束标签，因为他是要去解析这些标签的，看不到结束，那他就不知道开始以后就没人匹配了。啊，OK，如果你标签体没有内容，就这么写。当然，你也可以再专门去写一个结束标签啊。再来一个什么八啊八，我能这么写吗？

来不来？不能因为你要写内容的呀。你这个button里面不要写内容吗？啊叫叫什么提示输入啊，提示输入啊。就是提示一下输入内容是多少，还有什么，再来一个input。没问题是吧，而且这个input是不是有有一个失去焦点啊提示数据。有一个hold的是吧，呃，就是失去焦点。嗯，提示内容啊，就这样吧，差不多好，下面渲染组件标签。嗯，与老师一样的是吧，点re。来一个标签。My component，再来一个did。

感觉他们套路总是出来是一样啊好，我们现在打开先看一下，看能不能显示，可以显示吧，显示没问题，挨的有点太紧了吧。这咋办？啊啊NBSP是吧，啊可以加，你要觉得一个不不够加两个是吧。这样分开一点刷一下，嗯，好一点了吧，好一点了，下面我希望做的交互啊，相当于我现在做了一个初始化的展现，下一步就要做交互了，做交互我输入一个ABC，点击它就能够什么提示，我们说过做交互从哪开始做。绑定事件监听。是吧，这个地方需要指定一个什么on是吧？等于写一个固定的写法，大括号Z是点什么？

徐还是明？啊啊。叫，比如叫show input可以吗？就显示输入的内容吗？OK吧，OK好，那这个里面呢。来啊，这个里面先写上这个，但是我们明显知道啊，一旦是自立了。就要写一些东西了，其实是固定的，看props，固定的soup props接着。写一段固定的话，其实瑞点它等于点它点半的瑞啊，这东西都是一个套路，就固定的模式就改，就这名字改。啊OK，后面啊，我要做些事情呢，做什么呢，得看我要做什么，做什么样的效果呀，我最终是要提示这个input的内容。

这该怎么办？那我是不是现在得了这个input？怎么得呢？有get element by，那是原声do。能懂，不不是我们我们现在是react，是react去做项目，做东西不能用生动，那怎么办呢。是不是要最好，我们以前其实最好的方法，以前是不是老学ID啊，Get element by ID。那是不是更直接，但不能这么做，但思想是这个思想。思想是这个思想。If等于。啊，等于取个名字。叫什么呢？是要看可以吧，那你说这个iff相当于是什么。这是ID，这就是个标识，对不对啊，有了这个标识，我怎么样去得到这个input呢？

亲爱的，那input吧。怎么的，等于？This，我们说是不是有第三个属性，叫什么名字。S为什么是S？我大家想想看，我这个div里面，我这个button是不是也可以搞个，我下面的这个是不是也可以搞个if。那你想啊，多个IO是不是放到一个对象里面，那就取名叫is。他宿主还是对象？当取名叫S的可能是数组，也可能是对象。那你怎么知道是对象的了？大家想啊，现在我每一个是不是都有一个标识名称，这个标识名称是不是就是对象的属性名呢？你怎么办点它。下面的事情好办了吧，什么东西店铺的？

爹，玩了不就拉倒了吗？对不对对的好，我们来看一下，看看是不是就可以了啦，刷一下来AA走你。So easy吗？OK。可以吧，可以啊，这种模式呢，写起来非常舒服，但是呢，官方他并不建议这么写。啊，这是让人非常操蛋的事情，他不建议你这么做啊，那他建议你怎么做了是吧？OK，是这么写啊，这个写法挺怪的啊，我得跟大家写一写，再来一个input吧。再来一个银的啊。啊，再来一个音input，它是这么写的。它这个if啊，我们我们现在是不是得一个字符串名称呢，它不是它是大号，说明要写什么代码，减S代码好看啊。

啊，不是这个是那个input。看到啊点啊，Input等于input。啊，这个这个这个大小括号也没有必要的，可以不要了，这是一个什么意思，它这个iff，它的一个回调函数。能看懂不能看懂，这个回调函数呢，是在我们的这个第一次啊渲染的时候，它就会去做。John怎么做了？就是它这个回调函数这个input，你觉得谁。当前的这一个input的动物元素。能懂吧，就当前这个input动元素，而里面做了个什么事？把那个input保存到谁身上去了，是不是组件对象身上去了，记住啊，这个是组件对象啊。

那你说我这个里面我该怎么去办呢？我这个数input的内容。对吧，OK，我下面就非常好办了啊。来啊。嗯，我这个我我这个我用一下它啊，不用它了，来A我写什么this.input点什么。能看到吧，啊，你前面那个也很牛的啊，一样，其实那种方式了，他不太建议用而已，大家看着刷一下。我是不是在这里面说啊啊说的拉走你有没有有。啊，OK。最最以前的版本就是比较低的版本，React比较低的版本是这么用的啊，后来呢，他他也挺奇怪的，他也没把这种这种方式呢给他废弃啊，有没有废弃，但是呢，提出了一种新的写法，这种写法稍微要麻烦一点，说实话，因为一上来就要指定一个函数，我这。

你我说你就好理解，这个理解起来稍微费劲一点。啊，而且这种写法看起来也麻烦一点。对吧，OK，因为明显嘛，指定一个函数这种写法，而且还用了建的函数。这个地方大家要注意这个名字，一定要叫这个名字吗？不一定，你叫什么名字都行，你叫他他都没问题。能懂吗？啊，OK，这个固定的就代表当前这个元素能懂吗？啊，OK，好。那下面呢，我们要做另外一个事情，这。啊，这一个是不是失去焦点做一个什么事情，那我要绑定监听呢，绑定什么监听啊不乐对吧，等于来。This碟。

这叫什么？那肯定不能叫安不勒啊，你或你叫你要叫叫这个名字，这个名字比较常见，叫汉的不勒，这种类似的名字比较比较常见，叫汉的什么世界名能懂不就处理这个事件嘛。啊，你要知道on什么意思，不能的意思什么。当什么什么的时候，对吧。OK，好，我就叫汉乐吧，来下面。写一个他。对吧，我们说过了，所有的都应该干啥。不管他你不管，用不用认识你，先干上再说。懂吧，啊，这样肯定就万无一失。好，下面。我在回调函数里面干嘛去？是要读取当前发生事件的这个input的值啊，这个比较比较特别，当然我能不能用if去实现。可以，但这一次比较特别。

因为我要操作的动物元素是我发生事件的元素。能懂吧，我有一种更高明的方法，看到大家知道所有的事件回流函数都有一个形参，叫一问他。没忘吧？那你说我怎么样得到当前这个发生事件元素的值啊，对吧？Even什么，他给的得到谁了？啊，这个下面这个音铺的是不是接着了。Anyone。能看到吧，啊OK，来看一下。ABC点一下别的区域，它就会失去焦点。OK吧？这就完了。这里面讲了两个知识点啊，讲了两个点，其实一个是is，一个是事件处理。

能看到吧，啊OK，注意这个。啊，一定要注意啊，我们再去绑定时间监定的时候，有去写括号调用吗。没有，你不能写他来调。是他去调的，不是你来调的，嗯。啊，这是这样一个事情，嗯。