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

// 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 (

注意，當(dāng) ref 屬性被一個(gè) HTML 元素使用時(shí)（比如當(dāng)前示例中的 input 元素），在 constructor 中使用 React.createRef() 創(chuàng)建的 ref 會(huì)接收來(lái)自底層 DOM 元素的 current 值。
譯注：這里的 current 應(yīng)該是 合成事件(SyntheticEvent)
這意味著訪(fǎng)問(wèn) DOM 值，我們需要寫(xiě)這樣的東西：
[JavaScript] 純文本查看 復(fù)制代碼
?
1
this.textInput.current;

第二個(gè)元素是一個(gè)按鈕，點(diǎn)擊它之后會(huì)自動(dòng)聚焦到第一個(gè)輸入框上面。我們?yōu)?onClick 屬性設(shè)置了 this.focusTextInput 函數(shù)。
[JavaScript] 純文本查看 復(fù)制代碼
?

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

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

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

// 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);};
上面，參數(shù) e 包含事件對(duì)象。我們使用e.preventDefault() 來(lái)告訴瀏覽器我們正在處理被點(diǎn)擊的提交按鈕，我們不希望這個(gè)事件“冒泡”（意思就是說(shuō)，阻止瀏覽器的默認(rèn)行為）。
譯注：這里可以看一下 React 對(duì)于事件的處理：在 React 中另一個(gè)不同點(diǎn)是你不能通過(guò)返回 false 的方式阻止默認(rèn)行為。你必須顯式的使用 preventDefault
在上面示例中，我們打印了 this.textInput ，在控制臺(tái)可以看到一個(gè) ref 對(duì)象。
[JavaScript] 純文本查看 復(fù)制代碼
?
1

Object {current: HTMLInputElement}
請(qǐng)注意，它有一個(gè) current屬性，即 HTMLInputElement 。這是 input DOM 元素本身，而不是實(shí)際值。 我們必須使用 this.textInput.current.value 來(lái)獲取 input 標(biāo)簽的實(shí)際值：
[JavaScript] 純文本查看 復(fù)制代碼
?

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.current.value);};
使用 refs 是一種從表單中直接提取值的方式：只需要給 input 標(biāo)簽設(shè)置 ref ，并在你需要的時(shí)候?qū)⒅堤崛〕鰜?lái)。
Refs 回調(diào)
Refs 回調(diào) 是在 React 中使用 ref 的另一種方式。要以這種方式使用 ref，我們需要為 ref 屬性設(shè)置回調(diào)函數(shù)。當(dāng)我們?cè)O(shè)置 ref 時(shí)，React 會(huì)調(diào)用這個(gè)函數(shù)，并將 element 作為第一個(gè)參數(shù)傳遞給它。
這是另一個(gè)例子的代碼。像上面的示例一樣，此代碼獲取 input 標(biāo)簽的文本值，但在這里我們使用回調(diào)引用：
[JavaScript] 純文本查看 復(fù)制代碼
?

// 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 - 但是，再次聲明，這不應(yīng)該在新代碼中使用，因?yàn)檫@個(gè) API 將被棄用。
轉(zhuǎn)發(fā) Refs (Forwarding Refs)
Ref forwarding 是一種將 ref 通過(guò)組件傳遞給其子節(jié)點(diǎn)的技術(shù)。它對(duì)于可復(fù)用組件庫(kù)和高階組件（HOC）等情況非常有用。
您可以使用 React.forwardRef 函數(shù)將 ref 轉(zhuǎn)發(fā)到組件。我們來(lái)看下面的例子：
[JavaScript] 純文本查看 復(fù)制代碼
?

// 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 通過(guò)為組件 指定一個(gè)同名的 JSX 的屬性，將 ref 向下傳遞。然后 React 將會(huì)把 ref 作為第二個(gè)參數(shù)轉(zhuǎn)發(fā)給 forwardRef 函數(shù)。
接下來(lái)，我們將此 ref 參數(shù)轉(zhuǎn)發(fā)給 。現(xiàn)在可以在外層組件通過(guò) inputRef.current 訪(fǎng)問(wèn)DOM節(jié)點(diǎn)的值了。
轉(zhuǎn)發(fā) refs 和高階組件
最后，讓我們看一下使用 refs 的另一個(gè)例子，但這次是使用高階組件（HOC）。
在上面的示例應(yīng)用程序中，會(huì)將所有 input 標(biāo)簽中輸入的值在控制臺(tái)打印。這里已經(jīng)為 input 標(biāo)簽設(shè)置了 ref 屬性，接下來(lái)，讓我們看一下需要如何在高階組件中傳遞 / 轉(zhuǎn)發(fā) ref 。
[JavaScript] 純文本查看 復(fù)制代碼
?

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

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

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

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