00:00
好了,各位说完了这个细节上的问题之后啊,我们重新回到react文档里面,我们看一圈,他之前跟我们说呀,String类型的ref的过时了,你可以用以下两种形式,一,回调的形式,二,用那个最新的API叫create ref,我们这一小节呢,肯定是给大家呀,讲解这个人的使用啊,那别急,我们点一下回调函数啊,点一下它去看看react的官方呢,是怎么写回调函数ref那个案例的,那回到这这个案例呢,稍微的臃肿了一点,我们只观察我们想看的地方啊,同学瞧一下这啊,是不是into的。里边是不是写了ref呀,而且你注意同学他写的是回调形式的,而且没有写内联的回调函数,写的是类绑定的函数,对吗?那叫什么名字呀,Site text的input ref,我们叫做save input,你往上找这东西肯定在,是不是在这呢?那你看它是不是也接到了一个节点呀,我们叫做current note,它叫做element啊,那它也放在了组件实例自身,我们叫做INPUT1,它叫做test input,对吧?同学,那他写的呢,稍微复杂了一点,因为你发现啊,他的构造器还带着他所有这些事儿呢,都在构造器里完成的,那么我们也知道构造器呢,是完全可以省略的,所以说它这个案例呢,稍微的臃肿了一点点啊来,我们接着往下看,那接下来呢,去讲这个create ref,那回到我们的代码当中,我不想在三这个基础上进行复制啊,因为这里边呢,我为了掩示问题,我把天气炎不炎热也掺和进来了,有点乱,那所以说呢,我在二的基上。
01:40
啊,CTRLCCTRLV,然后呢,改个名字。编号呢,叫做四了,我就直接说那个名字吧,我就不说什么什么形式的了,Create create,创建ref。那这个名字呢,得给它复制来到这里呢,给它粘贴一下,好,里边这些结构呢,这些东西都准备好,只不过呀,我这个ref不能再写回调形式了,目录呢,收一下啊,我把这个input呢,先给它干掉啊,咱先写一个,里边肯定是不能写回调了,那写什么呢?别急啊,我在这里面呢,写这么一句代码,同学,你还记不记得是什么意思了?A等于一,那就是给DEMO类的实例对象身上追加一个A属性值为一,对吗?好,那接下来呢,我那属性不叫A了,那属性叫my ref啊,就我的ref,那这边呢,我也不写一了,我直接调用react身上的一个API,它的名字就叫做create ref,好说老师,那这个react.create ref能干嘛呢?给大家写一个注释啊,我写在这儿走,关于react.create ref,呃,它本身呢,是个函数,那么调。
02:53
用后啊,可以返回一个容器,那么该容器可以存储被ref所标识的节点,哎说老师那这怎么理解呢?就是它一调用就返回一个容器,这个容器里边就可以存储被ref所标识的那些节点,那如果我这么写的话,同学你说含义是不是我创建出来了一个容器,这个容器呢,我挂在了实力的自身上。
03:31
起了个名字叫my ref,对吗?那你写这个的时候呢,就非常的省心了,同学,你在这直接写this.my ref,我为什么非得加this呀?兄弟,My ref你是放在实力自身上的哟,所以说你得带这个this吗?说老师,那我这么写了之后他能怎么办呢?说一下38行代码在执行的时候,他发现,哎呦喂,你写的RF,而且你写的是用create ref所创建出来的一个容器。
04:03
那这个时候呢,他会做这么一件事,就把当前ref所在的那个节点,也就是这个input直接存储到了这个容器里边。同学,它就不是什么回调函数了,明白不?它是用react最新的api.rf生成的一个容器,容器专门用于存储被ref所标识的节点。说老师呢,听你这意思,Input就被存在这个里边了,对,那所以说回头你点击按钮提示左侧输入的时候,同学我把这些呢先全都删掉,Coollo同学,我可不可以输出一下那个容器呢?容器里边不是存着节点呢,我要节点里的Y流值,那你别急呀,先把容器输出,你看看那个容器里边是什么样子的,你再决定怎么去取吗?好了,那保存我们打开这个啊走。
05:00
控制台呢,打开刷新一下。同学,你输入一个123,然后点击提示左侧的数据,同学,请问输出的是什么?就是那个my ref,就是那个专门用于存储被ref所标识节点的那个容器啊,朱老师,那里边你的input是不是在这儿呢呀,对吗?你想取到input,兄弟是不是得通过key去取出value啊?那所以说我想拿到那个节点,你告诉我吧,我得怎么拿this.my ref点谁current,这不能丢,如果是current这个属性你也不能改,人家写好的,那所以说来吧,这就可以再点一个谁呢current好了,保存,那回头呢,我们看一下效果啊,输入123走是拿的是不是这个音谱的节点啊,对,但是我想要它的value值啊,哎,那怎么办呀,点儿是不是value啊,好,那回头呢,我们看一下效果,输入123走123是不是出来了,那我。
06:04
我的目的不是consolo,我的目的是alert,好,那么这个时候你注意看,来到这儿输入123走,诶,就提示左侧的数据了,说老师那这挺好用的,以后就所有东西就都往这儿存吧,不行,为什么呢?补一句话,该容器是专人专用的,是写个引号专人专用的,也就是说里边其实它只能存一个。嗯,老师我再存第二个就不行了,哎,那你试试吧,同学,我点击这个show data的时候呀,我接下来不让它alert它了,我就让它输出呢,这个this.myrf,然后我把这个东西再给BUTTON1份,那你说这个意思就是我要把input存到这个容器里,代码再往下执行,说我要把这个button呢也存在里面去,同学由于是专人专用的,所以说后放进去的东西就把之前的给顶掉了,那所以说你注意看啊,当你输入个123走,同学你发现里边存的根本就不再是input了,而是那个button,所以说是专人专用的啊,那也就意味着你这儿呢是不能这么写的,OK,那这儿呢给它主掉,这呢给它解开,那同学你别忘了,我是不是还有一个input呀,那所以说呢,哎,把这个呢给它复制,然后呢,在下边再来一份,这就不能叫my ref,你要。
07:35
再叫这个的话,是不是把之前那个给覆盖了呀,那说老师怎么办呀,My refr,那你这就得保证你真的是有一个my refr,那你取出东西的时候,同学也很简单了,你把这个复制,然后把这个丢在这这删掉,删掉这是this.my ref2点current.Y6哎,那这时候呢,我们再试一下,但是别急啊,它还没加事件呢,我们是得加一个on,不是click,它是失去焦点,叫做uml,然后是this,点哪个呀,Show data r对吗?好了,那我们试试啊,看看效果,这不是点击按钮提示啊,都给它改正确了,叫做失去焦点提示数据回到页面当中测试一下啊,输入123走没问题,输入456失去焦点也没问题。同学这个呢,就是create ref,用这个呢,稍微繁琐的一个地方就是你得创建。
08:35
很多ref的容器,你这用几个,你就得保证上方呢,你创建了几个对吧?哎稍微呢麻烦一点,但是这种形式呢,是目前react最推荐的一种形式,嗯,好了,那我们把视频呢停一下。
我来说两句