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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步