1.字符串
通過 this.refs.demo 來引用真實(shí)dom的節(jié)點(diǎn),建議不要使用它,因?yàn)樽址糜幸恍﹩栴}抵赢,被認(rèn)為是遺留問題镣丑,很可能會在未來的某個版本中刪除。新版好像不推薦這樣使用了
<input? ref="demo" type ="text" placeholder='點(diǎn)擊之后提示數(shù)據(jù)'/>
2.回調(diào)函數(shù)(內(nèi)聯(lián)形式)
回調(diào)函數(shù)就是在dom節(jié)點(diǎn)或組件上掛載函數(shù)愈犹,函數(shù)的入?yún)⑹莇om節(jié)點(diǎn)或組件實(shí)例,達(dá)到的效果與字符串形式是一樣的,都是獲取其引用漩怎。(實(shí)際開發(fā)中使用的比較多)
?<input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder='點(diǎn)擊之后提示數(shù)據(jù)'/>?
3.回調(diào)函數(shù)(外聯(lián)形式)
<input ref={this.saveInput} type="text" placeholder='點(diǎn)擊之后提示數(shù)據(jù)'/>
saveInput=(current)=>{
? ? console.log(current)
? ? this.input1=current
? }
4.React.createRef()
React.createRef()是React 16.3之后引入的新API勋颖。如果您使用的是早期版本的React,我們建議您使用回調(diào)引用勋锤。Refs是使用屬性創(chuàng)建的饭玲,React.createRef()并通過ref屬性附加到React元素。在構(gòu)造組件時叁执,通常將Refs分配給實(shí)例屬性茄厘,以便可以在整個組件中引用它們。
<input ref={this.myRef1} type="text" placeholder='點(diǎn)擊提示createRef'/>
myRef1= React.createRef() //專人專用每次都只能一次,
myRef2= React.createRef() //專人專用每次都只能一次,
獲取input的值:console.log(this.myRef.current.value)
React 官方文檔中如此聲明:"如果你目前還在使用 this.refs.textInput 這種方式訪問 refs 谈宛,我們建議用回調(diào)函數(shù)或 createRef API 的方式代替次哈。" 為何如此糟糕?
自行百度吧吆录、因?yàn)槲乙膊恢?!!!
以上就是react中ref一些總結(jié)窑滞、希望能幫到一些同學(xué)們