React this.refs.dom與ReactDOM.findDOMNode使用與區(qū)別

ccj659 發(fā)布于2019-08-20 18:09 / 528人閱讀

摘要：一選取元素獲取節(jié)點(diǎn)的獲取組件的只能由獲取組件的真實(shí)節(jié)點(diǎn)不太推薦或廢棄了以上的用法，而是用

一、選取 DOM 元素

1.this.refs.name獲取dom節(jié)點(diǎn)的DOMNode

handleSubmit = () => {
    let name = this.refs.name.value,    // 獲取DOMnode
        content = this.refs.content.value,
        publishTime = this.refs.publishTime.value,
        _test = this._test.value;

        console.log(name, content, publishTime, _test);
}

name:

2.組件的DOMNode只能由ReactDOM.findDOMNode獲取

componentDidMount() {
    console.log(this.refs.commnet);    // undefined
    // console.log(this.refs.commnet.offsetWidth);
    console.log(ReactDOM.findDOMNode(this.refs.comment));    //Comment組件的真實(shí)dom節(jié)點(diǎn):
    console.log(ReactDOM.findDOMNode(this.refs.comment).offsetWidth);    // 1904
}

3.React不太推薦或廢棄了以上refs的用法，而是用ref callback

_test = this._test;
console.log(_test.value);

test:  this._test = test } />

GPU云服務(wù)器云服務(wù)器阿里大于與阿里與通信區(qū)別 linux與區(qū)別大數(shù)據(jù)與區(qū)別 html .與區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84139.html

相關(guān)文章

5、React組件事件詳解

摘要：組件事件響應(yīng)在構(gòu)建虛擬的同時(shí)，還構(gòu)建了自己的事件系統(tǒng)且所有事件對(duì)象和規(guī)范保持一致。的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個(gè)特性事件代理和事件自動(dòng)綁定。 React組件事件響應(yīng) React在構(gòu)建虛擬DOM的同時(shí)，還構(gòu)建了自己的事件系統(tǒng)；且所有事件對(duì)象和W3C規(guī)范保持一致。 React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個(gè)特性：事件代理、和事件自動(dòng)綁定。 1、事件代理 ...

Ververica 2019-08-22 15:13 評(píng)論0 收藏0
ReactDOM You Should

摘要：并不是組件中的任何地方都能夠使用獲取結(jié)構(gòu)，只對(duì)掛載后的組件生效。組件的一個(gè)特殊屬性，接受一個(gè)回調(diào)函數(shù)作為參數(shù)。反之，則表示卸載失敗。再看一下這段代碼這個(gè)回調(diào)函數(shù)其實(shí)是沒有參數(shù)的，但是，當(dāng)方法變成異步方法之后，說(shuō)不定就會(huì)向其注入一些參數(shù)了。在react的組件的開發(fā)過(guò)程中，一般來(lái)說(shuō)，我們并不會(huì)真正的去操作dom。只有在頂層組件的渲染的過(guò)程中，我們借助ReactDOM.render()方法...

mo0n1andin 2019-08-20 19:07 評(píng)論0 收藏0
react開發(fā)教程（六）React與DOM

摘要：當(dāng)組件裝載完畢時(shí)，就會(huì)被調(diào)用。它可以是一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在組件被掛載后立即執(zhí)行。也可以是一個(gè)字符串吧放到原生的組件中，我們可以通過(guò)獲取到節(jié)點(diǎn)而如果吧放到組件上獲取到的就是組件的實(shí)例上一篇開發(fā)教程五生命周期下一篇開發(fā)教程七事件系統(tǒng) ReactDOM findeDOMNode 語(yǔ)法：DOMElement findDOMNode(ReactComponent component)...

call_me_R 2019-08-21 11:51 評(píng)論0 收藏0
React基礎(chǔ)再回顧

摘要：方法一必須在這里綁定方法二使用屬性初始化器語(yǔ)法需要開啟以上方法三在使用時(shí)綁定方法四在回調(diào)函數(shù)中使用箭頭函數(shù)渲染的時(shí)候都會(huì)創(chuàng)建一個(gè)不同的回調(diào)函數(shù)。然而如果這個(gè)回調(diào)函數(shù)作為一個(gè)屬性值傳入低階組件，這些組件可能會(huì)進(jìn)行額外的重新渲染。從16年夏天初學(xué)React，到17年正式投入到工作中使用，直到現(xiàn)在V16.2發(fā)版，React發(fā)生了巨大的變化，最近在工作中使用時(shí)遇到很多基礎(chǔ)不是非常清晰，借此再...

2450184176 2019-08-22 15:16 評(píng)論0 收藏0