React-Hooks之useImperativeHandler使用介绍

更新时间：2023年07月17日 11:03:12 作者：YiYa_咿呀

这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

什么是useImperativeHandle Hook?

useImperativeHandle可以让你在使用ref 时自定义暴露给父组件的实例值,我的理解就是不让外界随便对通过ref拿到的元素进行操作，maybe我们可以称之为“权限配置"这里出现了ref，小单简单地回顾一下前几天学习的useRef,可以知道ref就是帮助我们获取某个元素而设定的。

But!!!!!我记得当时说过useRef并不能帮助我们拿到函数式组件，只能帮我们拿到函数式组件中的某个元素,让小单来验证一下吧。

//1. 构造一个函数式组件
import React, {useRef} from 'react';
function Home(props) {
    return (
        <div>
            <p>Home</p>
            <input type="text" placeholder={'请输入内容'}/>
        </div>
    )
// App.js
function App() {
  // 2.创建一个ref
    const appRef = useRef();
    function btnClick() {
//打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
    }
    return (
        <div>
            <Home ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}

结果如下：可以发现useRef拿不到函数式组件Home，但是控制台给了我们提示，可以使用React.forward()

让我们跟着控制台的提示来尝试一下吧~我对代码进行了改进React.forward()和mome一样是一个高阶组件

主要改进

const ForwardHome = forwardRef(Home);

代码如下：

import React, {useRef, forwardRef} from 'react';
//1. 构造一个函数式组件
function Home(props) {
    return (
        <div>
            <input type="text" placeholder={'请输入内容'}/>
        </div>
    )
// App.js
function App() {
  // 2.创建一个ref
    const appRef = useRef();
    function btnClick() {
//打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
    }
    return (
        <div>
//用forwardRef返回的ForwardHome代替Home
            <ForwardHome ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}

结果如下，这表明我们此时我们通过React.forward()可以拿到函数式组件了

既然可以拿到函数式组件了，那意味着我们也可以对其进行操作，试一下吧~

将btnClick方法添加对其操作的代码

此时页面会自动聚焦并显示设置的文本：

    function btnClick() {
        //打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
      //对拿到的元素进行操作
        appRef.current.focus();
        appRef.current.value = '华科上岸，小单冲冲冲！';
    }

但是问题又来了，如果说我并不想让外界通过以上方法随意的对拿到的函数式组件进行操作，只可以进行部分操作（类似于权限控制的说法)该怎么做呢？

此时useImperativeHandler就诞生了！

用法：

1. 导入useImperativeHandle
import React, {useRef, forwardRef, useImperativeHandle} from 'react';
2.创建
//接受的第一个参数是一个ref,第二个参数是一个回调函数，返回其允许进行的操作
useImperativeHandle(appRef, ()=>{
        return {
            myFocus: ()=>{
                inputRef.current.focus();
            }
        }
    });

具体代码：

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() {
        // console.log(appRef);
        // console.log(appRef.current);
        appRef.current.focus();
        appRef.current.value = '华科上岸，小单冲冲冲！';
    }
    return (
        <div>
            <ForwardHome ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}
export default App;

此时仍然通过 appRef.current.focus();进行操作就不可以，因为useImperativeHandle第二个参数返回的东西里没有这个操作

终极方案

调用useImperativeHandle定义的myFocus可以实现自动聚焦

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() {
        // console.log(appRef);
        // console.log(appRef.current);
        // appRef.current.focus();
       // appRef.current.value = '华科上岸，小单冲冲冲！';
        appRef.current.myFocus();
    }
    return (
        <div>
            <ForwardHome ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}
export default App;

以上就是React-Hooks之useImperativeHandler使用介绍的详细内容，更多关于React-Hooks useImperativeHandler的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React Mobx状态管理工具的使用
这篇文章主要介绍了React Mobx状态管理工具的使用，MobX是一个状态管理库，它会自动收集并追踪依赖，开发人员不需要手动订阅状态，当状态变化之后MobX能够精准更新受影响的内容，另外它不要求state是可JSON序列化的，也不要求state是immutable
2023-02-02
在react中使用windicss的问题
这篇文章主要介绍了在react中使用windicss的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
jenkins分环境部署vue/react项目的方法步骤
这篇文章主要介绍了jenkins分环境部署vue/react项目的方法，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-02-02
react hooks d3实现企查查股权穿透图结构图效果详解
这篇文章主要为大家介绍了react hooks d3实现企查查股权穿透图结构图效果详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React中上传图片到七牛的示例代码
本篇文章主要介绍了React中上传图片到七牛的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
详解React Angular Vue三大前端技术
当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。
2021-05-05
React实现浮层组件的思路与方法详解
React 浮层组件（也称为弹出组件或弹窗组件）通常是指在用户界面上浮动显示的组件,本文主要介绍了浮层组件的实现方法,感兴趣的小伙伴可以了解下
2024-02-02
react实现无限循环滚动信息
这篇文章主要为大家详细介绍了react实现无限循环滚动信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
react+ant design实现Table的增、删、改的示例代码
这篇文章主要介绍了react+ant design实现Table的增、删、改的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
React Fiber原理深入分析
Fiber可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下<BR>
2023-01-01