脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React-Hooks useImperativeHandler

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进阶学习之组件的解耦之道

    React进阶学习之组件的解耦之道

    这篇文章主要给大家介绍了关于React进阶之组件的解耦之道，文中通过详细的示例代码给大家介绍了组件分割与解耦的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • 详解React 父组件和子组件的数据传输

    详解React 父组件和子组件的数据传输

    这篇文章主要介绍了React 父组件和子组件的数据传输的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • 30行代码实现React双向绑定hook的示例代码

    30行代码实现React双向绑定hook的示例代码

    本文主要介绍了30行代码实现React双向绑定hook的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • React组件之多选Checkbox实例

    React组件之多选Checkbox实例

    这篇文章主要介绍了React组件之多选Checkbox实例,具有很好的参考价值,希望对大家有所帮助,
    2023-10-10
  • 浅谈React高阶组件

    浅谈React高阶组件

    这篇文章主要介绍了浅谈React高阶组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • react+antd select下拉框实现模糊搜索匹配的示例代码

    react+antd select下拉框实现模糊搜索匹配的示例代码

    我们在开发过程中，经常会出现下拉框数据很多得情况，本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 教你使用vscode 搭建react-native开发环境

    教你使用vscode 搭建react-native开发环境

    本文记录如何使用vscode打造一个现代化的react-native开发环境，旨在提高开发效率和质量。本文给大家分享我遇到的问题及解决方法，感兴趣的朋友跟随小编一起看看吧
    2021-07-07
  • React深入分析useEffect源码

    React深入分析useEffect源码

    useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
    2022-11-11
  • React 性能优化方法总结

    React 性能优化方法总结

    这篇文章主要介绍了React性能优化方法总结，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • React中组件优化的最佳方案分享

    React中组件优化的最佳方案分享

    React组件性能优化可以减少渲染真实DOM的频率,以及减少VD比对的频率,本文为大家整理了一些有效的React组件优化方法,需要的小伙伴可以参考下
    2023-12-12

最新评论