react hooks 使用ref 操作 form 子組件

父組件

import React, { useState, useRef, useEffect, forwardRef } from 'react'
import ModelForm from './ModelFormCopy'

這樣寫 const ForwardEditInfo = forwardRef(ModelForm))  如果組件中有 connect 要使用 forwardRef 就會報錯

  Warning: forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...)).


改用下面這個


注意：！！這里不在Component上使用ref   換個屬性名  不然會導致覆蓋
const ForwardEditInfo = (forwardRef((props, ref) => <ModelForm {...props} refInstance={ref} />))


const DrawerEdit = (props)=>{

  let addRef = useRef()

  const submit=()=>{
    // 獲取到了
     let params = addRef.current.p()
  }

  return(
    <ForwardEditInfo
      ref={addRef}
      searchMobile={searchMobile}
      initialValues={currentItem}
    ></ForwardEditInfo>
  )

}

子組件

  const ModelForm=(props)=>{

    const editRef = useRef()

    useImperativeHandle(props.refInstance, () => ({
      p: form.getFieldsValue
    }))

    return (
      <div ref={editRef}>
      </div>
    )
  }