“React中的DOM操作”筆記

wyk1184 發布于2019-08-19 18:41 / 1434人閱讀

摘要：中的每一個組件都是一個狀態機，通常情況下，我們通過設置組件的狀態就可以完成的更新，但是在某些情況下確實需要直接操作。只在組件中調用，組件就是已經渲染在瀏覽器結構中的組件。

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 來實現的，你希望一個元素在你清空它的值時 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 (
      
        
          Click to Focus and Reset
        
        
      
    );
  }
}

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

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

GPU云服務器云服務器兼容筆記印象筆記筆記云筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79864.html

React中的小知識點

摘要：配置默認和中的操作并不能完全滿足所有操作需求，有些時候還是需要和打交道。當中提供了屬性來幫助我們獲取已經掛載元素的節點。當元素在頁面上掛載完成以后，就會調用這個函數，并且把這個掛載以后的節點傳給這個函數。配置默認 defaultProps class ExampleComponent extends React.Component{ static defaultProps =...

niceforbear 2019-08-20 16:59 評論0 收藏0
大部分程序員都記不住的注解，Idea 云筆記卻能輕松記住

摘要：只因技術種類繁雜眾多層出不窮，程序員只有靠不斷的學習才能不落后于技術，被工作淘汰。特此推薦給大家。 99%的程序員每天都是先學習，后工作，不然完成不了工作。只因技術種類繁雜眾多、層出不窮，程序員只有靠不斷的學習才能不落后于技術，被工作淘汰。我就是這其中一員，深得體會其中的「疼并快樂」，在...

ARGUS 2021-11-15 11:38 評論0 收藏0
EverMonkey-VSCode上最好用的印象筆記插件

摘要：配置在第一次使用小猿之前，需要配置印象筆記的開發者令牌。小猿在被激活后會執行一次這個命令，并且將以上內容緩存到內存中。建議與改進小猿是一個開源項目，歡迎廣大印象筆記和的愛好者的反饋以及。印象猿印象猿(EverMonkey)是一款 VSCode 插件。使用小猿可以讓你在 VSCode 中使用 Markdown 編輯，創建，更新印象筆記。安裝打開 VSCode，在擴展商店中搜索 e...

entner 2019-08-20 15:33 評論0 收藏0
LocalNote，像使用本地文件一樣使用印象筆記（支持 markdown 格式）

摘要：讓你能夠像使用本地文件一樣使用印象筆記。支持流行的格式的筆記，印象筆記中完美顯示，上傳重新下載筆記仍為格式。三平臺支持，安裝即用，在平臺也流暢的使用印象筆記。在被限制期間登錄也會受限，所以會提示尚未登錄。 LocalNote showImg(https://badges.gitter.im/littlecodersh/LocalNote.svg); showImg(https://im...

Galence 2019-07-31 12:21 評論0 收藏0