React.useImperativeHandle (通过ref暴露子组件中的方法)

怕冷的火焰（~杰）

已于 2024-05-29 16:06:09 修改

阅读量433

点赞数 8

分类专栏： React Hooks 文章标签： react.js

于 2023-12-27 10:45:23 首次发布

本文链接：https://blog.csdn.net/weixin_50236973/article/details/135239741

版权

React Hooks 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

/**
 * 通过ref暴露子组件中的方法
 */

import { forwardRef, useRef, useImperativeHandle } from 'react';

const Input = forwardRef((props, ref) => {
    const inputRef = useRef(null);

    const handleClick = () => {
        inputRef.current.focus();
    }

    // 把聚焦方法暴露出去
    useImperativeHandle(ref, () => {
        return {
            handleClick
        }
    })


    return (
        <input ref={inputRef} />
    )
})

function Layout() {
    const sonRef = useRef(null);

    const handleFocus = () => {
        console.log(sonRef.current);
        sonRef.current.handleClick();
    }

    return (
        <div>
            <Input ref={sonRef} />
            <button onClick={handleFocus}>focus</button>
        </div >
    )
}

export default Layout;