父組件( class)調(diào)用 子組件(hooks)的方法

父組件

interface initProps ={
}
class ListPage extends Component<initProps>{

  child: any = {} //主要加這個
 handlePage = (num: number): void => {
    // this.child.
    console.log(this.child.onChild())
  }
   onRef = ref => {
    this.child = ref
  }
render() {
return {
   <ListForm onSubmit={this.onSubmit} onRef={this.onRef} />
}
}



}

子組件

import React, { useImperativeHandle } from 'react'
interface ListFormProps {
  /** 申請完成觸發(fā) */
  onRef: any
}

const ListForm: React.FC<ListFormProps> = props => {
  const [form] = Form.useForm()

  //重置方法
  const onReset = () => {
    form.resetFields()
  }
}

 useImperativeHandle(props.onRef, () => ({
    // onChild 就是暴露給父組件的方法
    onChild: () => {
      return form.getFieldsValue()
    }
  }))
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容