React ref

ref用来存储DOM元素节点或者class组件实例 方便用ref进行操作

1.React.createRef

 class Hello extends React.Component{
    constructor(){
      this.textRef=React.createRef()
    }
    //使用
    this.textRef.current.focus()
    render(){
     <input ref={this.textRef}/>
    }
 }

2.通过回调Refs

class Hello extends React.Component{
    constructor(){
      this.textRef=null
    }
    //使用
    this.textRef.focus()
    render(){
    return <input ref={(node)=>{this.textRef=node}}/>
    }
 }

3.重点 Hook的useRef

function Hello(){
const textRef=useRef(null);
//使用
textRef.current.focus()
  return(
   <input  ref={textRef}/ >
  )
}

class组件使用ref获取form表单的setFieldValues时

  formRef=React.createRef();
  <form ref={formRef}>
  </form>