React-Hooks之useImperativeHandler使用介紹

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

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

什么是useImperativeHandle Hook?

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

But!!!!!我記得當時說過useRef并不能幫助我們拿到函數(shù)式組件，只能幫我們拿到函數(shù)式組件中的某個元素,讓小單來驗證一下吧。

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

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

讓我們跟著控制臺的提示來嘗試一下吧~我對代碼進行了改進React.forward()和mome一樣是一個高階組件

主要改進

const ForwardHome = forwardRef(Home);

代碼如下：

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

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

將btnClick方法添加對其操作的代碼

此時頁面會自動聚焦并顯示設置的文本：

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

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

此時useImperativeHandler就誕生了！

用法：

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

此時仍然通過 appRef.current.focus();進行操作就不可以，因為useImperativeHandle第二個參數(shù)返回的東西里沒有這個操作

終極方案

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

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

您可能感興趣的文章: