“React中的DOM操作”筆記

Gideon發表於2016-07-03
React筆記

React中的每一個元件都是一個狀態機，通常情況下，我們通過設定元件的狀態就可以完成UI的更新，但是在某些情況下確實需要直接操作DOM。

React中操作DOM的方法：

  • Refs
  • findDOMNode()

findDOMNode()

當元件載入到頁面上之後（mounted），你就可以通過 getDOMNode() 方法拿到元件對應的 DOM 元素。

React.findDOMNode()只在mounted元件中呼叫，mounted元件就是已經渲染在瀏覽器DOM結構中的元件。如果你在元件的render()方法中呼叫React.findDOMNode()就會丟擲異常。

Refs

通過在要引用的 DOM 元素上面設定一個 ref 屬性指定一個名稱，然後通過 this.refs.name 來訪問對應的 DOM 元素。

比如有一種情況是必須直接操作 DOM 來實現的，你希望一個 <input/>元素在你清空它的值時 focus，你沒法僅僅靠 state 來實現這個功能。

class App extends Component {
  constructor() {
    return { userInput: `` };
  }

  handleChange(e) {
    this.setState({ userInput: e.target.value });
  }

  clearAndFocusInput() {
    this.setState({ userInput: `` }, () => {
      this.refs.theInput.focus();
    });
  }

  render() {
    return (
      <div>
        <div onClick={this.clearAndFocusInput.bind(this)}>
          Click to Focus and Reset
        </div>
        <input
          ref="theInput"
          value={this.state.userInput}
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

如果ref 是設定在原生 HTML 元素上，它拿到的就是 DOM 元素，如果設定在自定義元件上，它拿到的就是元件例項，這時候就需要通過 findDOMNode來拿到元件的 DOM 元素。

因為無狀態元件沒有例項，所以 ref 不能設定在無狀態元件上，一般來說這沒什麼問題，因為無狀態元件沒有例項方法，不需要 ref 去拿例項呼叫相關的方法，但是如果想要拿無狀態元件的 DOM 元素的時候，就需要用一個狀態元件封裝一層，然後通過 ref 和 findDOMNode 去獲取。

相關文章