React得到真實的DOM操做

時間 2019-11-18

標籤 react 得到真實 dom 欄目 React 简体版

原文原文鏈接

真實的DOM操做html

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------react

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，git

咱們來看一組案例github

　　在代碼中咱們定義了一個組件 MyComponent 組件名字首字母必須大寫， handleClick（）是點擊事件，其中的ref
算法

是用來綁定render（）輸出的任何組件上。
babel

組件的子節點有一個文本輸入框，用於獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。爲了作到這一點，文本輸入框必須有一個 ref 屬性，而後 this.refs.[refName] 就會返回這個真實的 DOM 節點。數據結構

須要注意的是，因爲 this.refs.[refName] 屬性獲取的是真實 DOM ，因此必須等到虛擬 DOM 插入文檔之後，才能使用這個屬性，不然會報錯。上面代碼中，經過爲組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件以後，纔會讀取 this.refs.[refName] 屬性。app

React 除了 Click 事件之外，還有 KeyDown 、Copy、Scroll 等，完整的事件清單請查看官方文檔。dom

<!DOCTYPE html>
<html>
  <head>
  		<meta charset='UTF-8'>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
  	<h1>獲取真實DOM</h1>
  	<textarea style="width: 700px;height:500px;">
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
    //this.refs.myTextInput.value
    var example=document.getElementById('example');
    var test=document.getElementById('test');
    test.innerHTML=this.refs.myTextInput.value;
    example.appendChild(test)
  },
  render: function() {
    return (
      <div>{/*HTML中的註釋須要加花括號才能夠*/}
        <input type="text" ref="myTextInput" />{/*ref是用來綁定到render()輸出到任何組件上*/}
        <input type="button" value="點擊得到input框的value" onClick={this.handleClick} />
      </div>
    );
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
  	</textarea>
  	<h3>演示：</h3>
    <div id="example"></div>
    <div id="test"></div>
    <script type="text/babel">
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
    //this.refs.myTextInput.value
  
    var test=document.getElementById('test');
    test.innerHTML=this.refs.myTextInput.value;
   
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />{/*ref是用來綁定到render()輸出到任何組件上*/}
        <input type="button" value="點擊得到input框的value" onClick={this.handleClick} />
      </div>
    );
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
    </script>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。