接下來，讓我們看一個在 React 組件中使用 refs 的示例。
使用 Refs 聚焦輸入
這是另一個例子：
[JavaScript] 純文本查看 復制代碼
?

// Ref.jsclass CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}

focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we"re accessing "current" to get the DOM node
this.textInput.current.focus();
}

render() {
// tell React that we want to associate the ref
// with the textInput that we created in the constructor
return (

注意，當 ref 屬性被一個 HTML 元素使用時（比如當前示例中的 input 元素），在 constructor 中使用 React.createRef() 創建的 ref 會接收來自底層 DOM 元素的 current 值。
譯注：這里的 current 應該是 合成事件(SyntheticEvent)
這意味著訪問 DOM 值，我們需要寫這樣的東西：
[JavaScript] 純文本查看 復制代碼
?
1
this.textInput.current;

第二個元素是一個按鈕，點擊它之后會自動聚焦到第一個輸入框上面。我們為 onClick 屬性設置了 this.focusTextInput 函數。
[JavaScript] 純文本查看 復制代碼
?

type="button"
value="Focus the text input"
onClick={this.focusTextInput}/>
函數 focusTextInput() 使用了 JavaScript 構建 DOM 的標準函數。 .focus() 方法會將光標聚焦于文本輸入框上。
[JavaScript] 純文本查看 復制代碼
?

focusTextInput() {
this.textInput.current.focus();}
最后，focusTextInput 函數綁定在這樣的 constructor 方法中的：
[JavaScript] 純文本查看 復制代碼
?

this.focusTextInput = this.focusTextInput.bind(this);
從 ref 中獲取值
在這個例子中，我們將看到如何為 input 輸入框設置 ref 屬性，并通過 ref 來獲取值。示例如下：
在這個例子中，我們創建了一個 input 輸入框來輸入值。然后，當單擊提交按鈕時，我們將讀取此值，并在控制臺打印。
[JavaScript] 純文本查看 復制代碼
?

// Ref.jsclass CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
}
handleSubmit = e => {
e.preventDefault();

console.log(this.textInput.current.value);
};

render() {
// tell React that we want to associate the ref
// with the textInput that we created in the constructor
return (

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput);};
上面，參數 e 包含事件對象。我們使用e.preventDefault() 來告訴瀏覽器我們正在處理被點擊的提交按鈕，我們不希望這個事件“冒泡”（意思就是說，阻止瀏覽器的默認行為）。
譯注：這里可以看一下 React 對于事件的處理：在 React 中另一個不同點是你不能通過返回 false 的方式阻止默認行為。你必須顯式的使用 preventDefault
在上面示例中，我們打印了 this.textInput ，在控制臺可以看到一個 ref 對象。
[JavaScript] 純文本查看 復制代碼
?
1

Object {current: HTMLInputElement}
請注意，它有一個 current屬性，即 HTMLInputElement 。這是 input DOM 元素本身，而不是實際值。 我們必須使用 this.textInput.current.value 來獲取 input 標簽的實際值：
[JavaScript] 純文本查看 復制代碼
?

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.current.value);};
使用 refs 是一種從表單中直接提取值的方式：只需要給 input 標簽設置 ref ，并在你需要的時候將值提取出來。
Refs 回調
Refs 回調 是在 React 中使用 ref 的另一種方式。要以這種方式使用 ref，我們需要為 ref 屬性設置回調函數。當我們設置 ref 時，React 會調用這個函數，并將 element 作為第一個參數傳遞給它。
這是另一個例子的代碼。像上面的示例一樣，此代碼獲取 input 標簽的文本值，但在這里我們使用回調引用：
[JavaScript] 純文本查看 復制代碼
?

// Refs.jsclass CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = null;

this.setTextInputRef = element => {
this.textInput = element;
};
}

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.value);
};

render() {
return (

然后，我們可以在組建上得到這樣的值：this.refs.textInput.value - 但是，再次聲明，這不應該在新代碼中使用，因為這個 API 將被棄用。
轉發 Refs (Forwarding Refs)
Ref forwarding 是一種將 ref 通過組件傳遞給其子節點的技術。它對于可復用組件庫和高階組件（HOC）等情況非常有用。
您可以使用 React.forwardRef 函數將 ref 轉發到組件。我們來看下面的例子：
[JavaScript] 純文本查看 復制代碼
?

// Ref.jsconst TextInput = React.forwardRef((props, ref) => (
));const inputRef = React.createRef();class CustomTextInput extends React.Component {
handleSubmit = e => {
e.preventDefault();
console.log(inputRef.current.value);
};

render() {
return (

然后，我們將 ref 通過為組件 指定一個同名的 JSX 的屬性，將 ref 向下傳遞。然后 React 將會把 ref 作為第二個參數轉發給 forwardRef 函數。
接下來，我們將此 ref 參數轉發給 ?，F在可以在外層組件通過 inputRef.current 訪問DOM節點的值了。
轉發 refs 和高階組件
最后，讓我們看一下使用 refs 的另一個例子，但這次是使用高階組件（HOC）。
在上面的示例應用程序中，會將所有 input 標簽中輸入的值在控制臺打印。這里已經為 input 標簽設置了 ref 屬性，接下來，讓我們看一下需要如何在高階組件中傳遞 / 轉發 ref 。
[JavaScript] 純文本查看 復制代碼
?

const Input = InputComponent => {
const forwardRef = (props, ref) => {
const onType = () => console.log(ref.current.value);
return ;
};
return React.forwardRef(forwardRef);};
這里有一個名為 Input 的高階組件 ，它接受 InputComponent 作為參數。當用戶輸入的時候，他還會將 ref 的值在控制臺打印。
在 Input 高階組件內，forwardRef 函數會返回 InputComponent。forwardRef 函數中所包含的 ref 參數，是由 React.forwardRef 函數創建的。 高階組件最終會將包裝好的組件作為值返回。
接下來，我們創建一個組件，將 input 作為子組件包含進來。
[JavaScript] 純文本查看 復制代碼
?

const TextInput = ({ forwardedRef, children, ...rest }) => (

const InputField = Input(TextInput);class CustomTextInput extends Component {
render() {
const inputRef = React.createRef();

return ;
}}
最后，將 TextInput 傳入 Input 高階組件，會返回一個 InputField component。
創建一個 ref ，并作為參數傳遞給 InputField 組件。
結論
與通過 props 和 state 不同，Refs 是一種將數據傳遞給特定子實例的好方法。
你必須要小心，因為 refs 操縱實際的 DOM，而不是虛擬的 DOM，這與 React 思維方式相矛盾。因此，雖然 refs 不應該是通過應用程序流動數據的默認方法，但是當您需要時，它們是可以從 DOM 元素讀取數據的好方法。