學(xué)習(xí)react筆記6ref屬性_第1頁
學(xué)習(xí)react筆記6ref屬性_第2頁
學(xué)習(xí)react筆記6ref屬性_第3頁
學(xué)習(xí)react筆記6ref屬性_第4頁
學(xué)習(xí)react筆記6ref屬性_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

. proto:Object reactBoundArguments:null reactBoundContext:Constructor reactBoundMethod:() bind:(newThis proto:() <function name:"bound proto:() defaultValue:"pleaseinputyour proto:Object initialValue:"pleaseinputyour proto:Object pro Refs<input元素（存在于實(shí)例的子層級(jí)中）render()props（Reactivedata）renderUIReact擬DOM的限制，在render返回的組件實(shí)例上調(diào)用某些方法。通varApp= getInitialState:function() return{userInput: handleChange:function(e) this.setState({userInput: this.setState({userInput:''});//Clearthe //Wewishtofocusthe<input/> render:function() return <div ClicktoFocusand 注意，在示例中，我們想注意，在示例中，我們想“告訴input-props想“通知inputrender()中返回的內(nèi)容并不是你實(shí)際創(chuàng)建的子描述-注意記住，從render()中返回的內(nèi)容并不是實(shí)際渲染出來的子render()返回的僅僅是子組件層級(jí)樹實(shí)例在特render()//counterexample:DONOTDOrender:function() varmyInput=<input //I'mgoingtotrytocallmethodson this.rememberThisInput=myInput;//inputatsomepointinthefuture! return 在這個(gè)反例中，在這個(gè)反例中，<input/><input/>組件的描述創(chuàng)建一個(gè)真正的<input/>的支撐實(shí)例（backinginstance）所以，我們?nèi)绾闻c真正的input支撐實(shí)例（backinginstanceref屬Reactrender()render()返回的相應(yīng)的支實(shí)例（backinginstance）1refrender<inputref="myInput"處理代碼），this.refs獲取支撐例（backinginstance）this.refs.myInput.getDOMNode()完整示varApp= getInitialState:function() return{userInput: handleChange:function(e) this.setState({userInput: //Clearthe this.setState({userInput:''},function() //Thiscodeexecutesafterthecomponentisre- //Boom! render:function() return <div ClicktoFocusand render<input/>正的實(shí)例通過this.refs.theInput獲取。只要render返回的某個(gè)子組件ref="theInput"，this.refs.theInput就會(huì)獲取到正確的實(shí)例。這甚至對(duì)于更的（DOM）<Typeahead總RefspropsstateRefsareagreatwaytosendamessagetoaparticularchildinstanceinawaythatwouldbeinconvenienttodoviastreamingReactivepropsandstate.Theyshould,however,notbeyourionforflowingdatathroughyourapplication.default,usetheReactivedataflowandsaverefsforcasesthatareinherentlynon-（）refs（this.refs.myTypeahead.reset()）管理DOM幾乎總是需要沖出“本地”組件的限制，比如通過this.refs.myInput.getDOMNode(this.refs.myInput.getDOMNode()<input/>元素的底層DOMRefsRefsref會(huì)自動(dòng)銷毀。不用考慮內(nèi)存問題（保存了什保存了什 ）當(dāng)當(dāng)心絕不要在任何組件的render方法中 refs-或者在某個(gè)組件的render方法正在調(diào)用堆棧中運(yùn)行的時(shí)候。 resilience,makesuretoneveraccessasapropertywhatwasspecifiedasastring.Thismeansyoumustusingusingthis.refs['myRefString'] IfyouhavenotprogrammedseveralappswithReact,yourfirstinclinationisusuallygoingtobetotrytouserefsto"makethingshappen"inyourapp.Ifthisisthecase,takeamomentandthinkmorecriticallyaboutwherestateshouldbeownedinthecomponenthierarchy.Often,itesclearthattheproperceto"own"thatstateisatahigherlevelinthehierarchy.cingthestatethereofteneliminatesanydesiretouserefsto"makethingshappen"–instead,thedataflowwillusuallyplishyourgoal.<!doctype<html <metacharset="UTF- <title>組件嵌套 <div <scriptsrc="react- <script // varMessageBox= //getInitialState getInitialState: return inputValue:'pleaseinputyour selectValue: textAreaValue:'thisis radioValue: checkValues: handdleSelect: selectValue: handdleRadio: radioValue: handdleCheckBox: varnewValue= if(e.target.checked&&index==- checkValues: handdleSubmit: // getDOMNodeDOM //查找 varformData checkValues: checkRadio: render:function() return <form ref="goodsname"defaultValue={this.state.inputValue}/><br/> onChange={this.handdleSelect}ref="goodsBand"> <option <option <option <option <option say={this.say} this.state.textAreaValue是無法改變默認(rèn)值 defaultValue={this.state.textAreaValue} <inputtype="submit"value="提交 varCheckRadio= say: render: return name="groupRadio"value="a"defaultChecked/>A name="groupRadio"value="b"/>B name="groupRadio"value="c"/>C varMyBox= render: return value="abc"name="groupfav"/>abc value="efg"name="gr

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論