快捷導(dǎo)航

React-Hooks之useImperativeHandler使用介紹

更新時(shí)間：2023年07月17日 11:03:12 作者：YiYa_咿呀

這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

什么是useImperativeHandle Hook?

useImperativeHandle可以讓你在使用ref 時(shí)自定義暴露給父組件的實(shí)例值,我的理解就是不讓外界隨便對(duì)通過(guò)ref拿到的元素進(jìn)行操作，maybe我們可以稱之為“權(quán)限配置"這里出現(xiàn)了ref，小單簡(jiǎn)單地回顧一下前幾天學(xué)習(xí)的useRef,可以知道ref就是幫助我們獲取某個(gè)元素而設(shè)定的。

But!!!!!我記得當(dāng)時(shí)說(shuō)過(guò)useRef并不能幫助我們拿到函數(shù)式組件，只能幫我們拿到函數(shù)式組件中的某個(gè)元素,讓小單來(lái)驗(yàn)證一下吧。

//1. 構(gòu)造一個(gè)函數(shù)式組件
import React, {useRef} from 'react';
function Home(props) {
    return (
        <div>
            <p>Home</p>
            <input type="text" placeholder={'請(qǐng)輸入內(nèi)容'}/>
        </div>
    )
// App.js
function App() {
  // 2.創(chuàng)建一個(gè)ref
    const appRef = useRef();
    function btnClick() {
//打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
    }
    return (
        <div>
            <Home ref={appRef}/>
            <button onClick={()=>{btnClick()}}>獲取</button>
        </div>
    )
}

結(jié)果如下：可以發(fā)現(xiàn)useRef拿不到函數(shù)式組件Home，但是控制臺(tái)給了我們提示，可以使用React.forward()

讓我們跟著控制臺(tái)的提示來(lái)嘗試一下吧~我對(duì)代碼進(jìn)行了改進(jìn)React.forward()和mome一樣是一個(gè)高階組件

主要改進(jìn)

const ForwardHome = forwardRef(Home);

代碼如下：

import React, {useRef, forwardRef} from 'react';
//1. 構(gòu)造一個(gè)函數(shù)式組件
function Home(props) {
    return (
        <div>
            <input type="text" placeholder={'請(qǐng)輸入內(nèi)容'}/>
        </div>
    )
// App.js
function App() {
  // 2.創(chuàng)建一個(gè)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>
    )
}

結(jié)果如下，這表明我們此時(shí)我們通過(guò)React.forward()可以拿到函數(shù)式組件了

既然可以拿到函數(shù)式組件了，那意味著我們也可以對(duì)其進(jìn)行操作，試一下吧~

將btnClick方法添加對(duì)其操作的代碼

此時(shí)頁(yè)面會(huì)自動(dòng)聚焦并顯示設(shè)置的文本：

    function btnClick() {
        //打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
      //對(duì)拿到的元素進(jìn)行操作
        appRef.current.focus();
        appRef.current.value = '華科上岸，小單沖沖沖！';
    }

但是問(wèn)題又來(lái)了，如果說(shuō)我并不想讓外界通過(guò)以上方法隨意的對(duì)拿到的函數(shù)式組件進(jìn)行操作，只可以進(jìn)行部分操作（類似于權(quán)限控制的說(shuō)法)該怎么做呢？

此時(shí)useImperativeHandler就誕生了！

用法：

1. 導(dǎo)入useImperativeHandle
import React, {useRef, forwardRef, useImperativeHandle} from 'react';
2.創(chuàng)建
//接受的第一個(gè)參數(shù)是一個(gè)ref,第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，返回其允許進(jìn)行的操作
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={'請(qǐng)輸入內(nèi)容'}/>
        </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;

此時(shí)仍然通過(guò) appRef.current.focus();進(jìn)行操作就不可以，因?yàn)閡seImperativeHandle第二個(gè)參數(shù)返回的東西里沒(méi)有這個(gè)操作

終極方案

調(diào)用useImperativeHandle定義的myFocus可以實(shí)現(xiàn)自動(dòng)聚焦

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={'請(qǐng)輸入內(nèi)容'}/>
        </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使用介紹的詳細(xì)內(nèi)容，更多關(guān)于React-Hooks useImperativeHandler的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: