react 函数组件子组件将ref传给父组件

2301_77643651

已于 2023-05-17 17:37:18 修改

阅读量312

点赞数

文章标签： react.js javascript 前端

于 2023-05-17 14:02:21 首次发布

本文链接：https://blog.csdn.net/2301_77643651/article/details/130724265

版权

该文章讲述了在React中，如何使用`forwardRef`和`useState`、`useEffect`钩子进行父子组件间的通信，特别是在处理子组件的状态和方法时。文章通过示例展示了在父组件中获取子组件的ref，并利用它来控制子组件如Modal的显示状态，以及在编辑模式下如何正确设置表单的初始值。

摘要由CSDN通过智能技术生成

//父组件 
function AddTable(props,ref) {

 
const ModuleRef=useRef()

const [columnData,setColumnData]=useState({})

function edit(record){

  setColumnData(record)

 // setModuleStatus(true)

  console.log(record)

  console.log(ModuleRef)  //打印出来


}

         <AddModule  ModuleStatus={ModuleStatus}

                    changeStatus={changeModuleClose}

                    changeSave={changeSave}

                    columnData={columnData}

                    ref={ModuleRef}

        >

        </AddModule>

    </div>

  )

}



export default React.forwardRef(AddTable)

//子组件

import React from 'react'

const App = (props,ref) => {
    const form=useRef()
  
  React.useImperativeHandle(ref, () => ({
  form: form.current
  }));
  return (
    <>
      <Modal    title="新增教师" 
                open={props.ModuleStatus} 
                onOk={handleOk} 
                onCancel={handleCancel}
                centered
                width={800}
        >
        <Divider/>
        <Form
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 17 }}
            ref={form}
        >
            
        </Form>
      </Modal>
    </>
  );
};
export default React.forwardRef(App);

父组件 console.log(ModuleRef) //打印出来，这样就能拿到子组件的ref和它的方法了

参考的这个文章

由于我这个子组件还需要根据父组件edit函数来更改组件可见状态，所以会用到setState函数，直接在edit取值会因为异步的关系取不到，改进版本就是用useEffect检测一下组件状态，这样就能100%拿到ref了

function edit(record){
  setColumnData(record)
  setModuleStatus(true)
  setTitle("编辑教师数据")
  console.log(record)
}
//检测组件可见状态，填入值
useEffect(()=>{
  if( ModuleRef.current.form){
    if(title=="新增教师"){
      ModuleRef.current.form.resetFields()
    }
    if(title=="编辑教师数据"){
      columnData.birth= moment( columnData.birth)
      columnData.date= moment( columnData.date)
      ModuleRef.current.form.setFieldsValue({...columnData,
        date:columnData.date,
        type:Number(columnData.type)
      })
    }
    
  }
},[ModuleStatus])