useRef和forwardRef结合，实现父组件拿到子组件被ref标识的节点

先熟悉下useRef。React.useRef() 调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器只能存储一个节点。
（注意：访问节点值要通过ref.current.value）

作用：保存标签对象节点，功能与React.createRef一样
const myref = React.useRef()
function show(){
    console.log(myref.current.value);
  }```
return (
    
      <>
      <input type="text" ref={myref}/>
      <button onClick={destroy}>卸载组件</button>
      <button onClick={show}>提示input的ref信息</button>
      </>
  )

再熟悉下forwardRef。React.forwardRef,该方法接受一个有额外ref参数的react组件函数。

 const  Children = forwardRef((props,ref)=> {
  return (
    <div>
      <input type="text" ref={ref}/>
    </div>
  )
})
export default Children

开发中封装子组件，父组件需要拿到子组件节点的值，比如form,input等场景。就可以使用useRef和forwardRef结合，实现父组件拿到子组件被ref标识的节点，从而拿到子组件节点的值。
定义父组件：

import React, { useRef } from 'react'
import Children from './Children'
export default function Example() {
  // 1.父组件中通过useRef创建ref容器
  const ParentRdf = useRef()
  const getChidrenDom = ()=>{
    // 4. 父组件中通过创建的ref容器拿到子组件中被ref标识的节点
    console.log(ParentRdf.current.value);
  }
  return (
    <div>
      {/* 2.父组件中将创建的ref容器绑定在子组件标签上 */}
        <Children ref={ParentRdf}></Children>
        <button onClick={()=>{
          getChidrenDom()
        }}>父组件拿到子组件的ref标识节点</button>
    </div>
  )
}

定义子组件：

import React, { forwardRef } from 'react'
// 3.子组件中通过获取 **forwardRef**的**形参ref**,将其绑定在子组件节点上
// 从而让父组件拿到子组件被ref标识的节点
 const  Children = forwardRef((props,ref)=> {
 console.log(ref); // current: input
  return (
    <div>
      <input type="text" ref={ref}/>
    </div>
  )
})
export default Children

效果展示：实现父组件的按钮点击，拿到子组件被ref标识的节点。

总结步骤：
1.父组件中通过useRef创建ref容器
2.父组件中将创建的ref容器绑定在子组件标签上
3.子组件中通过获取到 forwardRef的形参ref,将其绑定在子组件节点上
4. 父组件中通过创建的ref容器拿到子组件中被ref标识的节点