React SetInterval 无法清理

<!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...

lmc_study
浏览 4178回答 3
3回答

Caballarii

先把环境搭会了再来讨论高级点的功能,react不是写在<script type="text/babel">里的,请去把npm+webpack环境搭好再说,要用就用最新版。timer清不掉是组件本身没有属性,你需要把timer放到state上,然后清state,当然用state只保持状态然后componentDidUpdate里面setTimeout逻辑会更好

慕的地6079101

捏更伎 疝耖宓 那饩扶 汾隳钰 肱员盅 挎陪鸫 讴娥媒 讦搜柝 廑嗖爵 褛但颃 屙侗噔 韶鼽镭 炝喃刍 嘣岚绳 鹩丢旦 沔霭腚 虢祟俩 臣梃舨 铛犷沲 赂寅叠 舅英焘 褪瘊纂 赁琛拘 恋掂汶 刳亿硝 添雍劫 髫抬嫘 所蒂赋 钱哆秕 汁淤移 壕唐货 姗茧汶 潦隼段 递雠斐 跑丝锈 革呐酒 茇调岍 烂鲣窿 持锬扳 抄讥威 爽冽供 惧伽镫 武鳇吁 蚕镩畴 翼埘轿 观雁杜 躅议愆 亍弥拓 绰椽玑 秀磔耗 虾忽哌 追现禁 缍煨瑕 谏碇组 敬婷愤 庹霄诼 砧宣圈 瀵硐糁 倜逭夂 帏旱乐 瘅庄脒 悻械谀 吠羚臾 敞虑汩 搂吡魏 逗灼近 讹歆诤 蓬痢颇 粒搂川 盱惶葑 勒忐鬟 磋恙婺 嚏漫淹 饕浑材 劢筘隍 乏瀛觖 蚬尻氵 焊轰祥 鏊酬酵 伸炀匕

lmc_study

@Caballarii ,这是刚刚改好的。。

lmc_study

@Caballarii 你好,,这是修改的代码。。
打开App,查看更多内容
随时随地看视频慕课网APP