react中ref的四种用法

Posted 2023-02-27

参考技术A 1.字符串

通过 this.refs.demo 来引用真实dom的节点,建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。新版好像不推荐这样使用了
<input  ref="demo" type ="text" placeholder='点击之后提示数据'/>

2.回调函数(内联形式)

回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。(实际开发中使用的比较多)
 <input ref=(currentNode)=>this.input1=currentNode type="text" placeholder='点击之后提示数据'/> 

3.回调函数(外联形式)
<input ref=this.saveInput type="text" placeholder='点击之后提示数据'/>
saveInput=(current)=>

    console.log(current)

    this.input1=current

 

4.React.createRef()
React.createRef()是React 16.3之后引入的新API。如果您使用的是早期版本的React，我们建议您使用回调引用。Refs是使用属性创建的，React.createRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。

<input ref=this.myRef1 type="text" placeholder='点击提示createRef'/>
myRef1= React.createRef() //专人专用每次都只能一次,

myRef2= React.createRef() //专人专用每次都只能一次,

获取input的值:console.log(this.myRef.current.value)

React 官方文档中如此声明："如果你目前还在使用 this.refs.textInput 这种方式访问 refs ，我们建议用回调函数或 createRef API 的方式代替。" 为何如此糟糕？

自行百度吧、因为我也不知道!!!!

以上就是react中ref一些总结、希望能帮到一些同学们