React Refs
React 支援一種非常特殊的屬性 Ref ，你可以用來繫結到 render() 輸出的任何元件上。
這個特殊的屬性允許你引用 render() 返回的相應的支撐例項（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的例項。
使用方法
繫結一個 ref 屬性到 render 的返回值上：
<input ref="myInput" />
在其它程式碼中，通過 this.refs 獲取支撐例項:
var input = this.refs.myInput; var inputValue = https://www.itread01.com/react/input.value; var inputRect = input.getBoundingClientRect();
完整例項
你可以通過使用 this 來獲取當前 React 元件，或使用 ref 來獲取元件的引用，例項如下：
React 例項
class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 獲取焦點
this.refs.myInput.focus();
}
render() {
// 當元件插入到 DOM 後，ref 屬性新增一個元件的引用於到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="點我輸入框獲取焦點"
onClick={this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
嘗試一下 ?
例項中，我們獲取了輸入框的支撐例項的引用，子點選按鈕後輸入框獲取焦點。
我們也可以使用 getDOMNode()方法獲取DOM元素