类组件

理解

字符串形式的ref 优先3

调形式的ref 优先1

createRef创建ref容器· 优先2

代码

class Demo extends React.Component{
  /* 
  React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
  */
  createRefSpan = React.createRef(); //方式三 利用createRef
  render(){
    return (
      <div>
        <span ref="stringSpan">string</span><br/>
        <span ref={c => this.funcSpan = c }>func</span><br/>
        <span ref={this.createRefSpan}>createRef</span><br/>
        <button onClick={this.btnClick}>Click</button>
      </div>
    )
  }
  btnClick = (e) => {
    console.log(this);
    console.log(this.refs.stringSpan); //方式一
    console.log(this.funcSpan);//方式二
    console.log(this.createRefSpan.current);//方式三
  }
}

函数组件 hook

const myRef = React.useRef()

export default function About()  {
    const myRef = React.useRef()

    function show(){
        console.log(myRef.current.value);
    }

    return(
        <div>
          <input type="text" ref={myRef}/>
                    <button onClick={show}>点我提示数据</button>
        </div>
    )
}

传递ref - forwardRef

获取函数组件不能使用ref, 必须使用 forwardRef 传递ref，把自身的ref绑定到其他地方

//子组件UserForm是函数组件
import React ,{forwardRef,useState,useEffect}from 'react'
const UserForm = forwardRef((props,ref)=> {
})
export default UserForm

//父组件要获取子组件UserForm
export default function UserList() {
  const addForm = useRef(null)

  console.log(addForm.current.resetFields())
  return(
    <UserForm regionList={regionList} roleList={roleList}  ref={addForm}></UserForm>
  )
}