一文詳解React類組件中的refs屬性
使用react實現input值的變化
我們使用類式組件實現如圖的一個簡單效果
<!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轉為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="請輸入數字" id="input" />
<button onClick={this.addNum}>+</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
</body>
</html>上述代碼，我們通過在按鈕上綁定addNum事件實現這個效果，addNum內我們直接操作了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轉為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="請輸入數字" 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="請輸入數字" 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。
注：這種方式已經不被官方推薦，后續(xù)版本中會移除
回調形式的ref
回調形式的ref本質是一個函數，下面是一個基本的示例
<script type="text/babel">
class Demo extends React.Component {
addNum = () => {
const dom = this.myInput
dom.value ++
};
render() {
return (
<div>
<input type="text" placeholder="請輸入數字" ref={(dom)=>{this.myInput = dom}} />
<button onClick={this.addNum}>+</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
在這個示例中，我們給ref綁定了一個函數，函數中，我們給this（類組件的實例上）創(chuàng)建了一個myinput屬性，并進行了賦值。
我們可以先打印看看dom這個形參是什么東西
<input type="text" placeholder="請輸入數字" ref={(dom)=>{console.log(dom);}} />通過打印結果，我們能很明確的知道這個形參dom就是input這個dom本身。
那自然在addNum函數里，我們可以通過 this.myInput 拿到input這個dom，并通過 dom.value 實現其值的自增。
createRef
除了字符串ref及回調函數類型的ref，我們還可以使用createRef來實現上述操作，一個基本的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="請輸入數字" 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的屬性內包含一個current屬性，這是react內置的，我們無法改變。
當我們的有多個標簽需要使用createRef函數時，需要給每個標簽定義不同的“myRef”名稱。
到此這篇關于一文詳解React類組件中的refs屬性的文章就介紹到這了,更多相關React refs屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了官方回答在React18中請求數據的正確姿勢詳解，同樣也適用其他框架，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
通過傳遞組件，我們可以將復雜組件內部的一部分 UI 交由外部組件來控制渲染，這也是控制反轉（Inversion of Control）的一種體現，在 React 中，我們可以通過三種方式來傳遞組件，本文就來給大家述說這三種方式,需要的朋友可以參考下2023-07-07
react實現鼠標懸停在SVG地圖上某個區(qū)域時上方呈現柱形圖效果
這篇文章主要介紹了react實現鼠標懸停在SVG地圖上某個區(qū)域時,其上方呈現柱形圖,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2025-04-04
jenkins分環(huán)境部署vue/react項目的方法步驟
這篇文章主要介紹了jenkins分環(huán)境部署vue/react項目的方法，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
在React中,組件通信是一個重要的概念,它允許不同組件之間進行數據傳遞和交互，本文主要介紹了React組件通信的實現示例，感興趣的可以了解一下2023-11-11
這篇文章主要介紹了react中實現將一個視頻流為m3u8格式的轉換方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了React為 Vue 引入容器組件和展示組件的教程詳解，文中很詳細的給大家介紹了使用容器組件的原因,需要的朋友可以參考下2018-05-05
React?createRef循環(huán)動態(tài)賦值ref問題
這篇文章主要介紹了React?createRef循環(huán)動態(tài)賦值ref問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了Header組件熱門搜索欄的實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了如何基于React實現倒計時功能,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-02-02