一文詳解React類組件中的refs屬性
使用react實(shí)現(xiàn)input值的變化
我們使用類式組件實(shí)現(xiàn)如圖的一個(gè)簡(jiǎn)單效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
</head>
<body>
<!-- 準(zhǔn)備好一個(gè)“容器” -->
<div id="test"></div>
<!-- 引入react核心庫 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于將jsx轉(zhuǎn)為js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<!-- 引入組件標(biāo)簽類型聲明文件 -->
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
addNum = () => {
let dom = document.getElementById("input");
dom.value++;
};
render() {
return (
<div>
<input type="text" placeholder="請(qǐng)輸入數(shù)字" id="input" />
<button onClick={this.addNum}>+</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
</body>
</html>上述代碼，我們通過在按鈕上綁定addNum事件實(shí)現(xiàn)這個(gè)效果，addNum內(nèi)我們直接操作了dom。
事實(shí)上，react也提供了ref屬性，幫助我們直接操作dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
</head>
<body>
<!-- 準(zhǔn)備好一個(gè)“容器” -->
<div id="test"></div>
<!-- 引入react核心庫 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于將jsx轉(zhuǎn)為js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<!-- 引入組件標(biāo)簽類型聲明文件 -->
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
addNum = () => {
let dom = document.getElementById("input");
dom.value++;
};
render() {
return (
<div>
<input type="text" placeholder="請(qǐng)輸入數(shù)字" id="input" />
<button onClick={this.addNum}>+</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
</body>
</html>上述代碼中，我們?cè)趇nput標(biāo)簽中使用 ref="input" 將其進(jìn)行標(biāo)識(shí)，然后通過 this.refs.input 直接獲取到了dom。
字符串ref
我們給input標(biāo)簽綁定ref后，我們觀察下類實(shí)例上發(fā)生了什么變化
class Demo extends React.Component {
addNum = () => {
// 這里的this指向Demo的實(shí)例化對(duì)象
console.log(this);
};
render() {
return (
<div>
<input type="text" placeholder="請(qǐng)輸入數(shù)字" ref="myInput" />
<button onClick={this.addNum}>+</button>
</div>
);
}
}可以觀察到，this實(shí)例對(duì)象上的refs屬性多了一個(gè)myInput屬性，其值也是input
我們打印下myInput屬性的值
addNum = () => {
// 這里的this指向Demo的實(shí)例化對(duì)象
console.log(this.refs.myInput);
};可以看到，myinput的屬性值就是input這個(gè)真實(shí)dom
這個(gè)示例中，我們通過ref="myInput" 對(duì)input標(biāo)簽進(jìn)行了標(biāo)識(shí)，標(biāo)識(shí)后的標(biāo)簽dom可以在實(shí)例對(duì)象的refs屬性中訪問到。通過這種方式創(chuàng)建的ref我們稱之為字符串類型ref。
注：這種方式已經(jīng)不被官方推薦，后續(xù)版本中會(huì)移除
回調(diào)形式的ref
回調(diào)形式的ref本質(zhì)是一個(gè)函數(shù)，下面是一個(gè)基本的示例
<script type="text/babel">
class Demo extends React.Component {
addNum = () => {
const dom = this.myInput
dom.value ++
};
render() {
return (
<div>
<input type="text" placeholder="請(qǐng)輸入數(shù)字" ref={(dom)=>{this.myInput = dom}} />
<button onClick={this.addNum}>+</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
在這個(gè)示例中，我們給ref綁定了一個(gè)函數(shù)，函數(shù)中，我們給this（類組件的實(shí)例上）創(chuàng)建了一個(gè)myinput屬性，并進(jìn)行了賦值。
我們可以先打印看看dom這個(gè)形參是什么東西
<input type="text" placeholder="請(qǐng)輸入數(shù)字" ref={(dom)=>{console.log(dom);}} />通過打印結(jié)果，我們能很明確的知道這個(gè)形參dom就是input這個(gè)dom本身。
那自然在addNum函數(shù)里，我們可以通過 this.myInput 拿到input這個(gè)dom，并通過 dom.value 實(shí)現(xiàn)其值的自增。
createRef
除了字符串ref及回調(diào)函數(shù)類型的ref，我們還可以使用createRef來實(shí)現(xiàn)上述操作，一個(gè)基本的demo如下
<script type="text/babel">
class Demo extends React.Component {
myRef = React.createRef();
addNum = () => {
this.myRef.current.value++;
};
render() {
return (
<div>
<input type="text" placeholder="請(qǐng)輸入數(shù)字" ref={this.myRef} />
<button onClick={this.addNum}>+</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
上述代碼中，我們?cè)陬愖陨砩蟿?chuàng)建了一個(gè)myRef屬性，其屬性值是React.createRef()創(chuàng)建的一個(gè)“容器”，然后，我們?cè)趇nput標(biāo)簽上通過ref={this.myRef}進(jìn)行了綁定。
我們觀察下this.myRef的屬性值
addNum = () => {
console.log(this);
this.myRef.current.value++;
};可以看到，myRef的屬性內(nèi)包含一個(gè)current屬性，這是react內(nèi)置的，我們無法改變。
當(dāng)我們的有多個(gè)標(biāo)簽需要使用createRef函數(shù)時(shí)，需要給每個(gè)標(biāo)簽定義不同的“myRef”名稱。
到此這篇關(guān)于一文詳解React類組件中的refs屬性的文章就介紹到這了,更多相關(guān)React refs屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了詳解React的回調(diào)渲染模式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要為大家介紹了react編寫可編輯標(biāo)題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
詳解React Angular Vue三大前端技術(shù)
當(dāng)前世界中，技術(shù)發(fā)展非常迅速并且變化迅速，開發(fā)者需要更多的開發(fā)工具來解決不同的問題。本文就對(duì)于當(dāng)下主流的前端開發(fā)技術(shù)React、Vue、Angular這三個(gè)框架做個(gè)相對(duì)詳盡的探究，目的是為了解開這些前端技術(shù)的面紗，看看各自的廬山真面目。2021-05-05
詳解React如何優(yōu)雅地根據(jù)prop更新state值
這篇文章主要為大家詳細(xì)介紹了React如何優(yōu)雅地實(shí)現(xiàn)根據(jù)prop更新state值,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以了解下2023-11-11
vite?+?react?+typescript?環(huán)境搭建小白入門教程
這篇文章主要介紹了vite?+?react?+typescript?環(huán)境搭建小白入門教程,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了淺談React高階組件,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要簡(jiǎn)單分析了React中的EffectList，幫助大家更好的理解和學(xué)習(xí)使用React進(jìn)行前端開發(fā)，感興趣的朋友可以了解下2021-04-04
React中使用Axios進(jìn)行HTTP請(qǐng)求
這篇文章主要為大家展示了如何在 React 中使用 Axios 進(jìn)行 HTTP 請(qǐng)求,包括 GET 和 POST 請(qǐng)求的使用,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11