react18---父组件调子组件

函数式组件的调用

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