先熟悉下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标识的节点