//父组件
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])