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 來獲取組件的引用，實例如下：

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 獲取焦點
    this.refs.myInput.focus();
  },
  render: function() {
    //  當組件插入到 DOM 后，ref 屬性添加一個組件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="點我輸入框獲取焦點"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

嘗試一下 ?

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

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