快捷導(dǎo)航

React三大屬性之Refs的使用詳解

更新時(shí)間：2021年04月15日 09:51:06 作者：xiaoznz

這篇文章主要介紹了React三大屬性之Refs的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下

類組件

在類中，refs有三種方式，目前最常用的是回調(diào)的形式使用,分別進(jìn)行演示

//直接定義refs,已廢棄
class App extends React.PureComponent{
    changeInput = ()=>{
        const {input} = this.refs
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/>
            </div>
        )
    }
}

//用回調(diào)的形式使用
class App extends React.PureComponent{
    changeInput = ()=>{
        console.log(this.inputRef);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
            </div>
        )
    }
}

//用createRef
class App extends React.PureComponent{
    inputRef = React.createRef()
    changeInput = ()=>{
        console.log(this.inputRef.current);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/>
            </div>
        )
    }
}

以上就是類組件的三種Ref的寫法

函數(shù)組件

function App(){
    const inputRef = useRef("")
    return (
        <div>
            <input type="text" placeholder={"please input your value"} ref={inputRef}/>
        </div>
    )
}

用一個(gè)useRef直接就完成了代碼

面試常問：React中的refs作用是什么？

Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個(gè)組件實(shí)例的句柄。在類組件中，React將ref屬性中第一個(gè)參數(shù)作為DOM中的句柄。而函數(shù)組件中,react用hooks的api useRef也能獲得ref(在hooks中也常常用useRef的特性即不隨著組件刷新而刷新存儲(chǔ)的數(shù)據(jù)從而寫一些不變的量)

以上就是React三大屬性之Refs的使用詳解的詳細(xì)內(nèi)容，更多關(guān)于React三大屬性之Refs的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: