ref的三种使用方式_ref怎么用

ref的三种使用方式

ref使用的三种方式之方式一： out (已废弃)

1）第1步：<input ref="item" type="text" /> ref后面跟一个字符串
2）第2步：this.refs.item.value  获取输入框中的数据
1
2

ref使用的三种方式之方式二：

ref后面跟上一个回调函数，回调函数的参数就是当前的DOM元素
<input ref={(input)=>{
    this.xxx = input; // 当前的DOM元素挂载到当前组件对象的xxx属性上面的
}} type="text" />
获取DOM元素：this.input.value
1
2
3
4
5

ref使用的三种方式之方式三：

1）this.ref1 = React.createRef(); // ref1是一个私有属性
2）<input ref={this.ref1} type="text" />
3）this.ref1.current.value  获取DOM元素中的内容
1
2
3

上面的ref的三种使用方式，都是用在html标签上面的，当前ref也可以用在组件上，
如果用在组件上，可以获取组件对象。 如果用在标签上，可以获取DOM元素。