接下來，讓我們看一個在 React 組件中使用 refs 的示例。
使用 Refs 聚焦輸入
這是另一個例子：
[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 屬性被一個 HTML 元素使用時（比如當(dāng)前示例中的 input 元素），在 constructor 中使用 React.createRef() 創(chuàng)建的 ref 會接收來自底層 DOM 元素的 current 值。
譯注：這里的 current 應(yīng)該是 合成事件(SyntheticEvent)
這意味著訪問 DOM 值，我們需要寫這樣的東西：
[JavaScript] 純文本查看 復(fù)制代碼
?
1
this.textInput.current;

第二個元素是一個按鈕，點擊它之后會自動聚焦到第一個輸入框上面。我們?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() 方法會將光標(biāo)聚焦于文本輸入框上。
[JavaScript] 純文本查看 復(fù)制代碼
?

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

this.focusTextInput = this.focusTextInput.bind(this);
從 ref 中獲取值
在這個例子中，我們將看到如何為 input 輸入框設(shè)置 ref 屬性，并通過 ref 來獲取值。示例如下：
在這個例子中，我們創(chuàng)建了一個 input 輸入框來輸入值。然后，當(dāng)單擊提交按鈕時，我們將讀取此值，并在控制臺打印。
[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 包含事件對象。我們使用e.preventDefault() 來告訴瀏覽器我們正在處理被點擊的提交按鈕，我們不希望這個事件“冒泡”（意思就是說，阻止瀏覽器的默認(rèn)行為）。
譯注：這里可以看一下 React 對于事件的處理：在 React 中另一個不同點是你不能通過返回 false 的方式阻止默認(rèn)行為。你必須顯式的使用 preventDefault
在上面示例中，我們打印了 this.textInput ，在控制臺可以看到一個 ref 對象。
[JavaScript] 純文本查看 復(fù)制代碼
?
1

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

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.current.value);};
使用 refs 是一種從表單中直接提取值的方式：只需要給 input 標(biāo)簽設(shè)置 ref ，并在你需要的時候?qū)⒅堤崛〕鰜怼?br>Refs 回調(diào)
Refs 回調(diào) 是在 React 中使用 ref 的另一種方式。要以這種方式使用 ref，我們需要為 ref 屬性設(shè)置回調(diào)函數(shù)。當(dāng)我們設(shè)置 ref 時，React 會調(diào)用這個函數(shù)，并將 element 作為第一個參數(shù)傳遞給它。
這是另一個例子的代碼。像上面的示例一樣，此代碼獲取 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)該在新代碼中使用，因為這個 API 將被棄用。
轉(zhuǎn)發(fā) Refs (Forwarding Refs)
Ref forwarding 是一種將 ref 通過組件傳遞給其子節(jié)點的技術(shù)。它對于可復(fù)用組件庫和高階組件（HOC）等情況非常有用。
您可以使用 React.forwardRef 函數(shù)將 ref 轉(zhuǎn)發(fā)到組件。我們來看下面的例子：
[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 通過為組件 指定一個同名的 JSX 的屬性，將 ref 向下傳遞。然后 React 將會把 ref 作為第二個參數(shù)轉(zhuǎn)發(fā)給 forwardRef 函數(shù)。
接下來，我們將此 ref 參數(shù)轉(zhuǎn)發(fā)給 。現(xiàn)在可以在外層組件通過 inputRef.current 訪問DOM節(jié)點的值了。
轉(zhuǎn)發(fā) refs 和高階組件
最后，讓我們看一下使用 refs 的另一個例子，但這次是使用高階組件（HOC）。
在上面的示例應(yīng)用程序中，會將所有 input 標(biāo)簽中輸入的值在控制臺打印。這里已經(jīng)為 input 標(biāo)簽設(shè)置了 ref 屬性，接下來，讓我們看一下需要如何在高階組件中傳遞 / 轉(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);};
這里有一個名為 Input 的高階組件 ，它接受 InputComponent 作為參數(shù)。當(dāng)用戶輸入的時候，他還會將 ref 的值在控制臺打印。
在 Input 高階組件內(nèi)，forwardRef 函數(shù)會返回 InputComponent。forwardRef 函數(shù)中所包含的 ref 參數(shù)，是由 React.forwardRef 函數(shù)創(chuàng)建的。 高階組件最終會將包裝好的組件作為值返回。
接下來，我們創(chuàng)建一個組件，將 input 作為子組件包含進來。
[JavaScript] 純文本查看 復(fù)制代碼
?

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

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

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