函数式组件的调用
1、父组件 useRef(),直接使用,并通过ref绑定到子组件身上
import AddModal from "./AddModal"
import { Modal } from "antd"
import { useState, useRef } from "react"
function DrugList() {
const modalRef = useRef()
const handleOk = () => {
console.log(modalRef.current)
modalRef.current.onFinish()
}
return (
<Modal onOk={handleOk}>
<div>
<AddModal ref={modalRef} />
</div>
</Modal>
)
}
export default DrugList
2、子组件 forwardRef, useImperativeHandle,通过forwardRef转发ref到DOM,使用useImperativeHandle自定义ref暴露,我这里做的是一个按钮在外部的表单验证,记录一下
import { forwardRef, useImperativeHandle } from "react"
import { Form,} from "antd"
const AddModal = forwardRef((props, ref) => {
const [form] = Form.useForm()
//暴露给父组件的方法以及数据
useImperativeHandle(ref, () => ({
onFinish,
}))
const onFinish = () => {
form.validateFields().then((values) => {
console.log(values)
})
.catch((err) => {
console.log(err)
})
}
return (
<Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 18 }}></Form>
)
})
export default AddModal