【第2章】2.4 组件三大核心属性3: refs与事件处理

组件三大核心属性3: refs与事件处理

一.属性ref分三种写法

①字符串形式的ref

<input ref="input1"/>

②回调形式的ref

<input ref={(c)=>{this.input1 = c}}

③createRef创建ref容器·

myRef = React.createRef() 
<input ref={this.myRef}/>

二.理解

①通过案例我们可以理解ref其实就是【组件内的标签可以定义ref属性来标识自己】，就类似js里面的id
②如下图演示可知，只要在标签里写了ref，都会收集到refs属性上

③如下图演示可知：在标签上加ref就可以拿到这个节点

三.我们通过一个小案例更好的理解

需求: 自定义组件, 功能说明如下:

1. 点击按钮, 提示第一个输入框中的值
2. 当第2个输入框失去焦点时, 提示这个输入框中的值
   效果如下：
   

我们用三种方法分别实现小案例的效果

1.字符串形式的ref（官方不太推荐此方法）

这种方式目前还在用，但是官网不推荐使用 在将来的版本可能会移除掉

2.回调形式的ref

3.createRef创建ref容器（官方目前最推荐的）
先理解一下

案例

四.拓展【事件处理】

通过上面案例我们会发现用到了事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)
   ①React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——为了更好的兼容
   ②React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了高效
2. 通过event.target得到发生事件的DOM元素对象——不要过度使用ref
   发生事件的元素，正好是你操作的元素就可以省略ref 如下：
   

愿有所收获，喜欢的点赞关注 持续更新中…