react-------經過Ref選取dom元素

Ref的做用：Refs 提供了一種方式，容許咱們訪問 DOM 節點或在 render 方法中建立的 React 元素。

何時使用：react的狀態態的開發形式，能經過狀態控制的，應該避免儘量少的使用ref。

一．建立並訪問refs（方法一）

①  建立refs：Refs 是使用 React.createRef() 建立的，並經過 ref 屬性附加到 React 元素。在構造組件時，一般將 Refs 分配給實例屬性，以即可以在整個組件中引用它們。

 

②  當 ref 被傳遞給 render 中的元素時，對該節點的引用能夠在 ref 的 current 屬性中被訪問

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 建立一個 ref 來存儲 textInput 的 DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 輸入框得到焦點
    // 注意：咱們經過 "current" 來訪問 DOM 節點
    this.textInput.current.focus();
  }

  render() {
    // 告訴 React 咱們想把 <input> ref 關聯到
    // 構造器裏建立的 `textInput` 上
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

注意：！！ref 的值根據節點的類型而有所不一樣：

• 當 ref 屬性用於 HTML 元素時，構造函數中使用 React.createRef() 建立的 ref 接收底層 DOM 元素做爲其 current 屬性。
• 當 ref 屬性用於自定義 class 組件時，ref 對象接收組件的掛載實例做爲其 current 屬性。

 

·         你不能在函數組件上使用 ref 屬性，由於他們沒有實例

 

二.使用回調refs來設置refs

 React 也支持另外一種設置 refs 的方式，稱爲「回調 refs」。它能助你更精細地控制什麼時候 refs 被設置和解除。

不一樣於傳遞 createRef() 建立的 ref 屬性，你會傳遞一個函數。這個函數中接受 React 組件實例或 HTML DOM 元素做爲參數，以使它們能在其餘地方被存儲和訪問。

 

下面的例子描述了一個通用的範例：使用 ref 回調函數，在實例的屬性中存儲對 DOM 節點的引用。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 輸入框得到焦點
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // 組件掛載後，讓文本框自動得到焦點
    this.focusTextInput();
  }

  render() {
    // 使用 `ref` 的回調函數將 text 輸入框 DOM 節點的引用存儲到 React
    // 實例上（好比 this.textInput）
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

View Code

React 將在組件掛載時，會調用 ref 回調函數並傳入 DOM 元素，當卸載時調用它並傳入 null。在 componentDidMount 或 componentDidUpdate 觸發前，React 會保證 refs 必定是最新的。

 

你能夠在組件間傳遞迴調形式的 refs，就像你能夠傳遞經過 React.createRef() 建立的對象 refs 同樣

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

在上面的例子中，Parent 把它的 refs 回調函數看成 inputRef props 傳遞給了 CustomTextInput，並且 CustomTextInput 把相同的函數做爲特殊的 ref 屬性傳遞給了 <input>。結果是，在 Parent 中的 this.inputElement 會被設置爲與 CustomTextInput 中的 input 元素相對應的 DOM 節點。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 建立一個 ref 來存儲 textInput 的 DOM 元素
 this.textInput = React.createRef();     this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 輸入框得到焦點
    // 注意：咱們經過 "current" 來訪問 DOM 節點
 this.textInput.current.focus();   }

  render() {
    // 告訴 React 咱們想把 <input> ref 關聯到
    // 構造器裏建立的 `textInput` 上
    return (
      <div>
<input type="text"  ref={this.textInput} /> <input type="button" value="Focus the text input" onClick={this.focusTextInput} />
</div>
    );
  }
}