react函數式組件之---父組件調用子組件實例方法

記錄函數式父組件，調用函數式子組件實例方法

父組件：

const Parent = () => {
  return <Child />
}

子組件：

const Child = () => {
  const inputRef = useRef()

  const focusFun = () => {
    inputRef.current.focus()
  }

  const onClick = () => {
    // some code
  }

  return <input ref={inputRef} />
}

現在，實現在父組件Parent里面調用Child組件的focusFun和onClick方法。實現方法主要使用react的useImperativeHandle和forwardRef。

react官網對useImperativeHandle和forwardRef的介紹：

 

 

 

 

調用useImperativeHandle和forwardRef修改組件

（1）useImperativeHandle向父組件暴露focus和onClick方法

 

 （2）父組件調用被forwardRef包裹的組件，並將ref傳遞給它。

 

 

 父組件25行打印ref對象：current對象下面就可以拿到剛剛在子組件定義的方法了。