函数式组件ref传值 & useImperativeHandle使用

最新推荐文章于 2025-10-17 09:57:29 发布

原创最新推荐文章于 2025-10-17 09:57:29 发布 · 926 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react

react踩坑日记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在React的函数式组件中使用ref传递值，强调了在父组件调用子组件方法时，需要在子组件内部使用forwardRef和useImperativeHandle。通过示例代码展示了错误和正确使用这两个API的方式，总结了正确传递和获取子组件数据的方法。

函数式组件调用ref传值

在父组件中要调用子组件传过来的值

父组件代码：

//Parent.jsx
import React,{ useRef } from 'react'
import Children from './Children.jsx'

function Parent(){
    //创建ref节点
    const childRef = useRef(null);
    //获取子组件的值
    const getCode = () => {
        console.log(childRef.current.sendCode());
    }
    return (
        <>
    		<Children ref={childRef}/>
			<button
              className="btn btn_black btn_primary"
              onClick={getCode}
            >
              点击获取子组件的数据
            </button>
		</>
    )
}

export default Parent

在父组件中使用ref节点使用xxx.current.子组件中定义的方法获取

在子组件中定义方法返回值

-错误我写的子组件代码：

//import React,{ useState } from 'react'

//function Children(){
//    const [data,setData] = useState('');
//    const sendCode = () => {
//        return data;
//    }
//    return (
//    	<input onChange={(value)=>{setDate(value)}} />
//    )
//}

//export default Children

通过百度查资料正确子组件代码

//Children.jsx
import React,{ forwardRef, useState, useImperativeHandle } from 'react'

function Children(ref){
    //使用useImperativeHandle包裹要传的方法的值------------重要代码
    useImperativeHandle(ref, () => {
        return {
          sendCode() {
            return {
              fileType: 'image',
              imageUrl: imageUrl,
              sorting: sorting,
              startTime: startTime,
              endTime: endTime,
              operationType: operationType,
              operationUrl: operationUrl
            };
          }
        };
      });
    
    const [data,setData] = useState('');
    
    return (
    	<input onChange={(value)=>{setDate(value)}} />
    )
}

//需要使用forwardRef包裹组件-------------------重要代码
Children = forwardRef(Children);
export default Children