React-Hooks-useImperativeHandle

useImperativeHandle Hook 概述

• useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值

暴露给父组件的实例值 这个是什么意思呢大致意思就是说，你想把当前组件的什么内容给父组件，可以实现一个权限的效果：

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

function Home(props, appRef) {
    return (
        <div>
            <p>Home</p>
            <input ref={appRef} type="text" placeholder={'请输入内容'}/>
        </div>
    )
}

const ForwardHome = forwardRef(Home);

function App() {
    const appRef = useRef();

    function btnClick() {
        appRef.current.focus();
        appRef.current.value = 'BNTang';
    }

    return (
        <div>
            <ForwardHome ref={appRef}/>
            <button onClick={() => {
                btnClick()
            }}>获取
            </button>
        </div>
    )
}

export default App;

如上代码呢，就是在 App 组件当中调用了 ForwardHome 然后获取了 ForwardHome 组件当中的 input，然后在让 input 聚焦焦点，然后又设置了 input 的 value 值。

如果这个时候，你只想让他进行聚焦，不想让他设置值，这个时候就需要借助 useImperativeHandle 才可以实现该需求（如下代码是正确情况下）：

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

function Home(props, appRef) {
    const inputRef = useRef();
    useImperativeHandle(appRef, () => {
        return {
            myFocus: () => {
                inputRef.current.focus();
            }
        }
    });
    return (
        <div>
            <p>Home</p>
            <input ref={inputRef} type="text" placeholder={'请输入内容'}/>
        </div>
    )
}

const ForwardHome = forwardRef(Home);

function App() {
    const appRef = useRef();

    function btnClick() {
        appRef.current.myFocus();
    }

    return (
        <div>
            <ForwardHome ref={appRef}/>
            <button onClick={() => {
                btnClick()
            }}>获取
            </button>
        </div>
    )
}

export default App;

不正确的情况就是还是使用 ref 引用的方法来进行调用的情况如下：

发现直接报错了，只能通过访问 useImperativeHandle 方法返回的内容来进行设置和调用。