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一些总结、希望能帮到一些同学们