2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

一.概述

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

組件的Refs用來獲取原生的HTML節(jié)點(diǎn)　

二.操作DOM

1.?ReactDOM.findDOMNode()

<input id= "submitButton" type= "button" value="submit" onClick={this.changerUserInfo.bind(this, 99)}/>

點(diǎn)擊按鈕后 ，按鈕字體變紅 使用findDOMNode 操作

//創(chuàng)建事件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對象

//創(chuàng)建事件changerUserInfo(age) {this.setState({age : age});console.log(this.refs.submitButton);} // ==> <input type= "button" id = "submitButton" value= submit/>

操作

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

這種方式更加好

Refs 是訪問到組件內(nèi)部DOM 節(jié)點(diǎn)唯一可靠的方法

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

不要在render 或 render ?之前對 Refs 進(jìn)行調(diào)用。要在事件內(nèi)進(jìn)行調(diào)用，不能再構(gòu)造函數(shù)中調(diào)用。

不要多用，更多運(yùn)用 state

轉(zhuǎn)載于:https://my.oschina.net/u/2991733/blog/1143053

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。