react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom

import { useRef } from "react"
function MyInput() {
	return (
		<input type="text"/>
	)
}
function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}

import { useRef,forwardRef } from "react"
const MyInput = forwardRef(function MyInput(props,ref) {
	return (
		<input type="text" ref={ref}/>
	)
})
function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}

import { useRef,forwardRef,useImperativeHandle } from "react"
const MyInput = forwardRef(function MyInput(props,ref) {
  // 添加如下
  const inputRef = useRef(null)
  useImperativeHandle(ref,()=>{
  	return {
      // 自定义方法
      focus(){
				inputRef.current.focus()
      }
   	}
  })
	return (
		// <input type="text" ref={ref}/>
    <input type="text" ref={inputRef}/>
	)
})
function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}