2.5 useImperativeHandle自定义ref的暴露

一、useImperativeHandle自定义ref的暴露

1. useImperativeHandle是React中的一个Hook，他能让你自由定义ref暴露出来的句柄

2. 代码示例：

   import { useRef, forwardRef, useImperativeHandle } from 'react'
   
   const MyInput = forwardRef(function MyInput(props, ref) {
     const inputRef = useRef(null)
     // 自定义暴露的句柄与功能
     useImperativeHandle(ref, () => {
       return {
         // 获取焦点
         focus() {
           inputRef.current.focus()
         },
         // 自己封装一下，获取焦点并修改颜色
         focusAndStyle() {
           inputRef.current.focus()
           inputRef.current.style.background = 'red'
         },
       }
     })
   
     return (
       <>
         <input type="text" ref={inputRef} />
       </>
     )
   })
   
   function App() {
     const ref = useRef()
   
     const handleClick = () => {
       // // 生效
       // ref.current.focus()
       // // 失效，并且报错
       // ref.current.style.background = 'red'
       // 获取焦点并改变样式
       ref.current.focusAndStyle()
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>按钮</button>
         <MyInput ref={ref} />
       </>
     )
   }
   
   export default App
   

   可以用于自定义组件时的安全扩展