2019獨角獸企業重金招聘Python工程師標準>>>

一.概述

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";}

這種方式更加好

Refs 是訪問到組件內部DOM 節點唯一可靠的方法

Refs會自動銷毀對子組件的引用

不要在render 或 render ?之前對 Refs 進行調用。要在事件內進行調用，不能再構造函數中調用。

不要多用，更多運用 state

轉載于:https://my.oschina.net/u/2991733/blog/1143053

總結

以上是生活随笔為你收集整理的reactJS -- 9 组件的Refs(操作DOM的两种方法)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。