top
Loading...
React Refs

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 實例

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元素

北斗有巢氏 有巢氏北斗