目錄

• react中ref獲取dom或者組件方法
• 使用ref獲取DOM的引用
• 使用ref獲取組件的引用
• react中的三種ref獲取DOM節(jié)點(diǎn)
• 第一種 ref字符串方式獲取Dom節(jié)點(diǎn)方式
• 第二種 回調(diào)式獲取Dom節(jié)點(diǎn)方式
• 第三種 回調(diào)式獲取Dom節(jié)點(diǎn)方式 掛在到自身實(shí)例
• 總結(jié)

react中ref獲取dom或者組件方法

使用ref獲取DOM的引用

在vue中，如果想獲取DOM元素時(shí)，可以使用this.$refs.引用名稱(chēng)

在react中也可以像vue中，有類(lèi)似的寫(xiě)法，如下

為元素添加ref引用

<h2 ref="test">這是h2標(biāo)簽</h2>

在頁(yè)面上獲取元素

this.refs.test

使用ref獲取組件的引用

為組件添加ref引用

<Text ref="hellow"/>

在頁(yè)面上使用組件的引用

this.refs.hellow

注意點(diǎn)： 只要使用ref拿到組件的引用對(duì)象，它就是組件的實(shí)例對(duì)象，因此就可以調(diào)用這個(gè)組件的方法，或者它的屬性

react中的三種ref獲取DOM節(jié)點(diǎn)

第一種 ref字符串方式獲取Dom節(jié)點(diǎn)方式

已廢棄的原始方法

?? ? class Dom extends React.Component{
? ? showInputDom = () =>{
? ? ? const {userNameInput} = this.refs
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? <input ref="userNameInput" type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點(diǎn)擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById("root"))

第二種 回調(diào)式獲取Dom節(jié)點(diǎn)方式

開(kāi)發(fā)常用

?? ?class Dom extends React.Component{
? ? showInputDom = () =>{
? ? ? const {userNameInput} = this
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {/*注釋 (currentNode)=>{this.userNameInput =currentNode} 這里邊的currentNode 為 當(dāng)前的node節(jié)點(diǎn) 簡(jiǎn)稱(chēng)c */}
? ? ? ? ? {/*<input ref={(currentNode)=>{this.userNameInput =currentNode}} type="text"/>*/}
? ? ? ? ? <input ref={(c)=>{this.userNameInput = c}} type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點(diǎn)擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById("root"))

第三種 回調(diào)式獲取Dom節(jié)點(diǎn)方式 掛在到自身實(shí)例

?? ? class Dom extends React.Component{
? ? // 掛載到了自身實(shí)例上了
? ? userNameInput= (c) =>{
? ? ? this.input1 = c ;
? ? ? console.log(c);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {/*會(huì)在試圖更新時(shí)調(diào)用兩次 第一次賦值為null,第二次賦值為dom節(jié)點(diǎn)*/}
? ? ? ? ? {/*<input ref={(c)=>{this.userNameInput =c}} type="text"/>*/}
? ? ? ? ? {/*在試圖更新時(shí)不會(huì)調(diào)用}
? ? ? ? ? {/*<input ref={ this.userNameInput } type="text"/>*/}
? ? ? ? ? {/*注意這倆個(gè)方法是有區(qū)別的,這兩個(gè)對(duì)項(xiàng)目的影響可以忽略不記*/}
? ? ? ? ? <input ref={this.userNameInput} type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點(diǎn)擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById("root"))

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持。