React Hooks 父組件調用子組件的方法

以及父組件控制子組件的input框獲取焦點

父組件：

import React, { useRef, useEffect } from 'react'
import FancyInput from './FancyInput'

export default function Test() {
  const inputRef = useRef(null)
  const onButtonClick = () => {
    inputRef.current.focus()
    inputRef.current.fun()
  }

  useEffect(() => {
    inputRef.current.focus()
  }, [])
  return (
    <>
      <FancyInput ref={inputRef}></FancyInput>
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  )
}

子組件：

import React, { useRef, useImperativeHandle, forwardRef } from 'react'

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    fun: () => {
      console.log('子組件的方法')
    }
  }));
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

export default FancyInput