<!DOCTYPE html><html>? <head>? ? <meta charset="UTF-8" />? ? <title>Hello React2!</title>? ? <script src="../build/react.js"></script>? ? <script src="../build/react-dom.js"></script>? ? <script src="../build/browser.min.js"></script>? </head>? <body>? ? <div id="example"></div>? ? <script type="text/babel">? ? var FatherControl = React.createClass({? ? ? ? getInitialState:function(){? ? ? ? ? ? return{? ? ? ? ? ? ? ? isStop:false,? ? ? ? ? ? ? ? isNum:1? ? ? ? ? ? };? ? ? ? },? ? ? ? onChildChanged:function(newState){? ? ? ? ? ? this.setState({? ? ? ? ? ? ? ? isStop:newState ? ??? ? ? ? ? ? });? ? ? ? ? ? var dd;? ? ? ? ? ? this.timer = setInterval(()=>{? ? ? ? ? ? ? ? ? ? var eeNum = this.state.isNum;? ? ? ? ? ? ? ? ? ? this.setState({isNum:eeNum+1});? ? ? ? ? ? ? ? ? ? if(!this.state.isStop){? ? ? ? ? ? ? ? ? ? ? ? console.log('this is stop');? ? ? ? ? ? ? ? ? ? ? ? console.log(this.timer); //這里可以取到這個timer的? ? ? ? ? ? ? ? ? ? ? ? clearInterval(this.timer);? ? ? ? ? ? ? ? ? ? ? ? this.timer = undefined;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? },1000);? ? ? ? },? ? ? ? componentWillUnMount:function(){ ? ? ?//這個測試用的，可以忽略? ? ? ? ? ? clearInterval(this.timer)? ? ? ? },?? ? ? ? numberAdd:function(){ ? ? ? ? ? ? ? ? //這個也是測試用的，也可以忽略? ? ? ? ? ? var ee=0? ? ? ? ? ? ee = setInterval(function(){? ? ? ? ? ? ? ? ? ? ? ? ?var eeNum = this.state.isNum;? ? ? ? ? ? ? ? ? ? ? ? ?this.setState({isNum:eeNum+1})? ? ? ? ? ? ? ? ? ? ?}.bind(this),1000);? ? ? ? ? ? ? ? ? ? return function(){? ? ? ? ? ? ? ? ? ? ? ? this.ee;? ? ? ? ? ? ? ? ? ? }? ? ? ? },? ? ? ? render:function(){? ? ? ? ? ? return (? ? ? ? ? ? ? ? <div>? ? ? ? ? ? ? ? ? ? <ImgPanel showvalue={this.state.isNum}></ImgPanel>? ? ? ? ? ? ? ? ? ? <MyButton callbackParent={this.onChildChanged}>Start</MyButton>? ? ? ? ? ? ? ? </div>? ? ? ? ? ? )? ? ? ? }? ? })? ? var MyButton = React.createClass({? ? ? ? getInitialState:function(){? ? ? ? ? ? return {? ? ? ? ? ? ? ? isStop:this.props.onclick? ? ? ? ? ? };? ? ? ? },? ? ? ? funClick:function(){? ? ? ? ? ? var newState = !this.state.isStop;? ? ? ? ? ? this.setState({? ? ? ? ? ? ? ? isStop:newState? ? ? ? ? ? });? ? ? ? ? ? this.props.callbackParent(newState);? ? ? ? },? ? ? ? render:function(){? ? ? ? ? ? var checked = this.state.checked;? ? ? ? ? ? return(? ? ? ? ? ? ? <button onClick={this.funClick}>Start</button> ?? ? ? ? ? ? )? ? ? ? }? ? })? ? var ImgPanel = React.createClass({? ? ? ? render:function(){? ? ? ? ? ? return(? ? ? ? ? ? ? ? <h3>{this.props.showvalue}</h3>? ? ? ? ? ? )? ? ? ? }? ? });? ? ReactDOM.render(? ? ? ? <FatherControl/>,? ? ? ? document.getElementById('example')? ? );? ? </script>? </body></html>現在在練習react組件部分的交互，FatherControl是父組件，MyButton和ImgPanel是子組件，ImgPanel是一個計數的功能，點擊MyButton時候可以啟動或者停止。剛開始練習，用的是舊版本的React...
3 回答
已采納
Caballarii
TA貢獻1123條經驗 獲得超629個贊
先把環境搭會了再來討論高級點的功能，react不是寫在<script type="text/babel">里的，請去把npm+webpack環境搭好再說，要用就用最新版。
timer清不掉是組件本身沒有屬性，你需要把timer放到state上，然后清state，當然用state只保持狀態然后componentDidUpdate里面setTimeout邏輯會更好
-
lmc_study好的，謝謝，我先按照你說的改下試試、、回頭搭下開發環境，，剛接觸、圖方便就這么寫了 -
lmc_study你好，，麻煩再問下 1、timer放到state上面，state保持狀態 指的是是否清理timer（state）嗎? 2、componentDidUpdate方法里面是否是寫是否清理timer的代碼? 初學者。。剛才按你說的把代碼重新寫了遍。然后各種調試，還是沒能成功，你要是有時間的話希望能再指點下。。謝謝！ 下面這是我修改的代碼。 var FatherControl = React.createClass({ getInitialState:function(){return{isStop:true,isNum:1,timer:''}; }, tick:function(){ this.setState({isNum: this.state.isNum + 1}); }, componentDidUpdate:function(){ if(this.state.isStop){ this.setState({ timer:setInterval(this.tick,1000) }); } else if(!this.state.isStop){ this.setState({ timer:'' }) } }, onChildChanged:function(newState){ this.setState({ isStop:newState }); }, render:function(){ return ( <div> <ImgPanel showvalue={this.state.isNum}></ImgPanel> <MyButton callbackParent={this.onChildChanged}>Start</MyButton> </div> ) } }) //...兩個子組件代碼沒有變化
慕的地6079101
TA貢獻3593條經驗 獲得超0個贊
捏更伎
疝耖宓
那餼扶
汾隳鈺
肱員盅
挎陪鶇
謳娥媒
訐搜柝
廑嗖爵
褸但頏
屙侗噔
韶鼽鐳
熗喃芻
嘣嵐繩
鷯丟旦
沔靄腚
虢祟倆
臣梃舨
鐺獷沲
賂寅疊
舅英燾
褪瘊纂
賃琛拘
戀掂汶
刳億硝
添雍劫
髫抬嫘
所蒂賦
錢哆秕
汁淤移
壕唐貨
姍繭汶
潦隼段
遞讎斐
跑絲銹
革吶酒
茇調岍
爛鰹窿
持錟扳
抄譏威
爽冽供
懼伽鐙
武鰉吁
蠶镩疇
翼塒轎
觀雁杜
躅議愆
亍彌拓
綽椽璣
秀磔耗
蝦忽哌
追現禁
綞煨瑕
諫碇組
敬婷憤
庹霄諑
砧宣圈
瀵硐糝
倜逭夂
幃旱樂
癉莊脒
悻械諛
吠羚臾
敞慮汩
摟吡魏
逗灼近
訛歆諍
蓬痢頗
粒摟川
盱惶葑
勒忐鬟
磋恙婺
嚏漫淹
饕渾材
勱筘隍
乏瀛觖
蜆尻氵
焊轟祥
鏊酬酵
伸煬匕
@Caballarii ,這是剛剛改好的。。
@Caballarii 你好，，這是修改的代碼。。-
CaballariicomponentDidUpdate什么時候觸發你都沒搞清楚，先從基礎打起吧
-
lmc_study下班后又調試了一個小時的成果。。貌似可以了，但是沒有用你說的componentDidUpdate方法，用的是componentWillUpdate這個方法，用兩個變量來控制是否執行setInterval
添加回答
舉報
0/150
提交
取消