資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中建立 refs？
在 ReactJS 中，refs 用於引用文件的任何節點。通常，我們可以將 props 傳遞給子元素，以從父級的狀態與子元素進行互動。但是，有時子元件會超出元件的典型資料流。例如，我們有四個元件，資料流是第二個是第一個的子級，第三個是第二個的子級，第四個是第三個元件的子級。要從第一個元件與第四個元件互動，從每個元件傳遞 props 不是一個好方法。因此，我們可以使用 refs 直接從第一個元件與第四個元件進行互動。
在本教程中，我們將學習兩種使用 refs 引用 DOM 元素的方法。
透過 React.createRef() 和 useRef() 鉤子建立 refs
在 ReactJs 中，建立 refs 的第一種方法是使用 React.CreateRef() 用於類元件和 useRef() 鉤子用於函式元件。在元件中建立 ref 變數後，我們可以將其分配為任何 HTML 元素的 ref 屬性的值。因此，它可以包含元素的引用。
語法
使用者可以按照以下語法使用 React.Createref() 在類元件中建立 ref。
this.InputElement = React.createRef();
<input type = "text" ref = {this.InputElement} id = "text" />
在上面的語法中，我們建立了 InputElement ref 並將其分配給 input。
使用者可以按照以下語法使用 useRef() 鉤子在函式元件中建立 ref。
const input = useRef(null);
<input type = "text" ref = {input} />
在上面的語法中，我們使用 useRef() 建立了 input ref 並引用了文字輸入。
示例
在下面的示例中，我們建立了包含文字輸入的類元件。在類元件的建構函式中，我們建立了 InputElement ref 和狀態物件。
之後，當用戶點選按鈕時，它將執行 getInputValue() 方法，該方法使用 refs 獲取輸入的值。
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
//creating refs to access input elements
this.InputElement = React.createRef();
this.getInputValue = this.getInputValue.bind(this);
this.state = {
text: "",
};
}
// method to get texts from the input
getInputValue(e) {
e.preventDefault();
this.setState({ text: this.InputElement.current.value });
}
render() {
return (
<div>
{/* use the ref attribute */}
<h2> Using the refs with class components </h2>
<p>Enter some text below:</p>
<input type = "text" ref = {this.InputElement} id = "text" />
<br></br>
<div> The submitted value is {this.state.text}. </div>
<button onClick = {this.getInputValue}> Click here </button>
</div>
);
}
}
export default App;
輸出
示例
在下面的示例中，我們使用 refs 與函式元件一起使用。在這裡，我們使用 userRef() 鉤子建立了一個 input ref。之後，我們將 ref 屬性與 HTML input 一起使用，並將 input ref 引用到它。
接下來，我們使用 ref 獲取輸入的值，就像在第一個示例中一樣。
import { useState } from "react";
import { useRef } from "react";
export default function App() {
const input = useRef(null);
const [value, setValue] = useState("");
function handleClick() {
let value = input.current.value;
setValue(value);
}
return (
<div>
<h2>
{" "}
Using the refs with functional components
</h2>
<input type = "text" ref = {input} />
<br></br>
<div> The value you have entered in the text input is {value}.</div>
<input type = "button" value = "Submit Text" onClick = {handleClick} />
</div>
);
}
輸出
透過回撥函式建立 refs
作為開發人員，如果希望在建立 refs 時編寫更易讀和清晰的程式碼，則應使用回撥 refs。“refs”屬性的元素採用回撥函式作為值，而不是 ref 變數。之後，我們可以獲取元素作為回撥函式的第一個引數，並且可以使用它將焦點設定到元素上或執行其他操作。
語法
使用者可以按照以下語法透過回撥函式建立 refs。
input type = "text" ref = {(ele) => {
this.input = ele;
};
} />
在上面的語法中，input 是在元件中宣告的變數，而 ele 指的是輸入元素本身。
示例
在下面的示例中，我們可以使用回撥函式建立 refs。首先，我們在建構函式中建立了 input 變數並將其初始化為 null 值。之後，我們將 setRef 回撥函式作為輸入元素的 refs 屬性的值傳遞。
“refs”屬性呼叫 setRef() 函式，該函式將輸入元素的引用儲存到 input 變數中，並且我們在 getTextInput() 方法中訪問 input 變數的值。
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "",
};
this.input = null;
this.setRef = (ele) => {
this.input = ele;
};
this.getTextValue = () => {
this.setState({ text: this.input.value });
};
}
render() {
return (
<div>
{/* use the ref attribute */}
<h2> Using the callback refs in ReactJS </h2>
<input type = "text" ref = {this.setRef} id = "text" />
<br></br>
<div> The submitted value is {this.state.text}. </div>
<button onClick = {this.getTextValue}> Click here </button>
</div>
);
}
}
export default App;
輸出
使用 refs 與子元件互動
引入 refs 是為了從子元件與父元件進行互動。在這裡，我們將分別在子元件和父元件中建立 ref，並透過父元件與子元件的元素進行互動。
語法
使用者可以按照以下語法使用 refs 從父元件與子元件進行互動。
// access refs of the child component
this.childClassRef.current.testRef.current.focus();
return <Child ref={this.childClassRef} />;
在上面的語法中，我們將 ref 傳遞給子元件並訪問了子元件的 ref。
示例
檔名 - App.js
在 App.js 檔案中，我們匯入了子元件並將 ref 作為 prop 傳遞。childClassRef 指的是子元件。此外，使用者還可以看到我們在 componentDidMount() 方法中如何訪問子元件的 ref。
testRef ref 在子元件中宣告，並且透過這種方式，我們可以從父元件訪問子元件的 ref。
import React from "react";
import Child from "./Child";
class App extends React.Component {
constructor(props) {
super(props);
this.childClassRef = React.createRef();
}
componentDidMount() {
this.childClassRef.current.testRef.current.focus();
}
render() {
return <Child ref = {this.childClassRef} />;
}
}
export default App;
檔名 - Child.js
在 Child.js 檔案中，我們使用 React.createRef() 建立了 testRef ref 並引用了 input 元素。
import React from "react";
import { Component } from "react";
class Child extends Component {
constructor(props) {
super(props);
this.testRef = React.createRef();
}
render() {
return (
<div>
<h3> This is a child component. </h3>
<input type = "text" ref = {this.testRef} />
</div>
);
}
}
export default Child;
輸出
在上面的輸出中，使用者可以觀察到，每當我們重新整理頁面時，應用程式都會從父元件聚焦到子元件的輸入元素上。
381 次瀏覽
