關於react中refs的使用

在react中，能夠使用refs來訪問dom，或者在render中建立react對象。

使用refs的主要用途是

1. 作一些動畫的交互
2. 媒體控件的播放
3. 獲取焦點、獲取文本等

使用refs的方式有兩種，一種是使用 React.createRef() API，另外一種是使用 回調形式的refs。

先來介紹第一種方式，使用React.createRef() API

import React, { Component } from 'react'
export default class App 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();
    console.log(this.textInput.current);//這邊輸出input的dom對象
  }

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

        <input
          type="button"
          value="點擊我獲取焦點"
          onClick={this.focusTextInput}
        />
      </div>
    );
   }
 }

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

import React, { Component } from 'react'
export default class App extends React.Component {
  constructor(props) {
    super(props);
    // 建立一個 ref 來存儲 textInput 的 DOM 元素
    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="點擊我獲取焦點"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

後面來說下，父子組件怎麼樣傳遞refs，你能夠在組件間傳遞迴調形式的 refs，代碼以下

import React, { Component } from 'react'
function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    // 建立一個 ref 來存儲 textInput 的 DOM 元素
    this.inputElement = null;
    this.setTextInputRef = element => {
      this.inputElement = element;
    };
    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 輸入框得到焦點
      console.log(this.inputElement)
      if (this.inputElement) this.inputElement.focus();
    };
  }
  componentDidMount() {
    // 組件掛載後，讓文本框自動得到焦點
    this.focusTextInput();
  }
  render() {
    return (
      <div> 
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
      <input
          type="button"
          value="點擊我獲取焦點"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

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

使用 React.forwardRef 來獲取傳遞 ref，React 傳遞 ref 給 fowardRef 內函數 (props, ref) => ...，做爲其第二個參數，而後轉發到它渲染的 DOM

import React, { Component } from 'react'
const CustomTextInput = React.forwardRef((props, ref) => (
  <div>
      <input ref={ref} />
   </div>
));

class App extends React.Component {
  constructor(props) {
    super(props);
    // 建立一個 ref 來存儲 textInput 的 DOM 元素
    this.inputElement = React.createRef();
    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 輸入框得到焦點
      console.log(this.inputElement)
      this.inputElement.current.focus();
    };
  }

  render() {
    return (
      <div> 
      <CustomTextInput
        ref={this.inputElement}
      />
      <input
          type="button"
          value="點擊我獲取焦點"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}