React-Hooks-useImperativeHandle

原创

杨不易呀

发布于 2023-10-01 08:28:51

2200

发布于 2023-10-01 08:28:51

文章被收录于专栏：杨不易呀

前言

useImperativeHandle 是 React 中的一个 Hooks，它通常与 forwardRef 一起使用，用于控制在函数组件内部暴露给父组件的 ref 对象的内容和方法。这个 Hook 允许您更精细地控制子组件的 API，使其更易于使用。

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 = 'yangbuyiya';
    }

    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 方法返回的内容来进行设置和调用。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

登录后参与评论

0 条评论

热度