react中ref的四种用法

1.字符串

通过 this.refs.demo 来引用真实dom的节点,建议不要使用它,因为字符串引用有一些问题,被认为是遗留问题,很可能会在未来的某个版本中删除。新版好像不推荐这样使用了


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

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

3.回调函数(外联形式)

saveInput=(current)=>{

    console.log(current)

    this.input1=current

  }

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


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

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

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


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

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

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

你可能感兴趣的:(react中ref的四种用法)