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

/**
 * 通过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;