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等场景。就可以使用useRefforwardRef结合,实现父组件拿到子组件被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标识的节点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值