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;
