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