React編程 Refs

React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。

這個特殊的屬性允許你引用 render() 返回的相應的支撐實例（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的實例。

使用方法

綁定一個 ref 屬性到 render 的返回值上：

<input ref="myInput" />

在其它代碼中，通過 this.refs 獲取支撐實例:

var input = this.refs.myInput;var inputValue = input.value;var inputRect = input.getBoundingClientRect();

完整實例

你可以通過使用 this 來獲取當前 React 組件，或使用 ref 來獲取組件的引用，實例如下：

React 實例

varMyComponent = React.createClass({handleClick: function(){// 使用原生的 DOM API 獲取焦點this.refs.myInput.focus(); }, render: function(){// 當組件插入到 DOM 後，ref 屬性添加一個組件的引用於到 this.refsreturn(
<div>
<inputtype="text"ref="myInput" />
<inputtype="button"value="點我輸入框獲取焦點"onClick={this.handleClick}
/>
</div> ); }});
ReactDOM.render(
<MyComponent />, document.getElementById("example"));

實例中，我們獲取了輸入框的支撐實例的引用，子點擊按鈕後輸入框獲取焦點。

我們也可以使用 getDOMNode()方法獲取DOM元素

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！