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