React基础之useInperativehandlle

通过ref调用子组件内部的focus方法来实现聚焦

与forwardRef类似，但是forwardRef是通过暴露整个Ref来实现，而useInperativehandle是通过对外暴露一个方法来实现的

import { forwardRef, useImperativeHandle, useRef, useState } from "react";

const Son=forwardRef((props,ref)=>{

  //实现聚焦逻辑

  const inputRef=useRef(null)

  const focushandleer=()=>{

    inputRef.current.focus()

  }

  //聚焦方法暴露出去

  useImperativeHandle(ref,()=>{

    return {

      //暴露的方法

      focushandleer

    }

  })

  return <input type="text" ref={inputRef}></input>

})

function App() {

  //传给子组件的函数

  const sonRef=useRef(null)

  const showRef=()=>{

    console.log(sonRef.current);

    sonRef.current.focushandleer()

  }

  return (

    <div className="App">

        <Son ref={sonRef}/>

        <button onClick={showRef}>focus</button>

    </div>

  );

}

export default App;