react中的refs是什麼

react中的refs是react支援的一種特殊屬性，這個特殊屬性允許我們引用render()傳回的對應的支撐實例。這樣我們就可以確保在任何時間總是拿到正確的實例。

本教學操作環境：windows10系統、react16版，此方法適用於所有品牌電腦。

（學習影片分享：react教學）

屬性介紹：

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 來取得元件的引用，如下：

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(&#39;example&#39;));

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

更多程式相關知識，請造訪：程式設計影片！ ！

以上是react中的refs是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！