reactJS -- 9 組件的Refs(操做DOM的兩種方法)

一.概述

https://react-cn.github.io/react/docs/more-about-refs.html

組件的Refs用來獲取原生的HTML節點　

二.操做DOM

1. ReactDOM.findDOMNode()

<input id= "submitButton" type= "button" value="submit" 

onClick={this.changerUserInfo.bind(this, 99)}/>

點擊按鈕後 ，按鈕字體變紅 使用findDOMNode 操做

//建立事件
  changerUserInfo(age) {
    this.setState({age : age});
    //第一種方式
    var mySubmitButton = document.getElementById('submitButton');
    ReactDOM.findDOMNode(mySubmitButton).style.color = 'red';
    console.log('a');

  }

2.定義Refs

給input 增長  ref = ''''  屬性

<input id="submitButton" ref="submitButton"  type= "button" value="submit" onClick=

{this.changerUserInfo.bind(this, 99)}/>

this.refs.submitButton 獲取input對象

//建立事件
  changerUserInfo(age) {
    this.setState({age : age});
    console.log(this.refs.submitButton);

  }
// ==> <input type= "button" id = "submitButton" value= submit/>

操做

//建立事件
  changerUserInfo(age) {
    this.setState({age : age});
    console.log(this.refs.submitButton);
    this.refs.submitButton.style.color = "red";

  }

這種方式更加好

1. Refs 是訪問到組件內部DOM 節點惟一可靠的方法
2. Refs會自動銷燬對子組件的引用
3. 不要在render 或 render  以前對 Refs 進行調用。要在事件內進行調用，不能再構造函數中調用。
4. 不要多用，更多運用 state