資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學ReactJS - createRef() 方法
在本文中，我們將瞭解如何在函式式元件中建立對任何 DOM 元素的引用。
此方法用於訪問元件中的任何 DOM 元素，它返回一個可變的 ref 物件，該物件在元件置入 DOM 時一直存在。如果我們將 ref 物件傳遞給任何 DOM 元素，那麼每當節點更改時，都會向相應的 DOM 節點元素新增 . current 屬性。
語法
React.createRef()
示例
在此示例中，我們將構建一個 React 應用，它會將 ref 物件傳遞給兩個輸入欄位，當點選按鈕時，它會自動獲取這些輸入欄位的資料。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.fetchUsername = this.fetchUsername.bind(this);
this.fetchEmail = this.fetchEmail.bind(this);
}
fetchUsername() {
this.refs.username.value = 'RahulBansal123';
}
fetchEmail() {
this.refs.email.value = 'rahul@gmail.com';
}
render() {
return (
<div>
<input type="text" ref="username" />
<input type="text" ref="email" />
<button type="button" onClick={this.fetchUsername}>
Username
</button>
<button type="button" onClick={this.fetchEmail}>
Email
</button>
</div>
);
}
}
export default App;在上面的示例中，當點選使用者名稱或電子郵件按鈕時，將分別呼叫 fetchUsername 和 fetchEmail 函式，它們將 ref 物件傳遞給輸入欄位，並將其值從 null 更改為某些文字。
輸出
這將生成以下結果。
更新時間：2021 年 3 月 18 日
898 次瀏覽
廣告