react输入撤销

时间：2016-11-30 19:46:16 阅读：155 评论：0 收藏：0 [点我收藏+]

标签：one onchange min name div charset pre height 3.2

销毁阶段可以使用的函数：
componentWillUnmount:在删除组件之前进行清理操作，比如计时器和事件监听器。因为这些函数都是开发者手动加上去的，react不知道，必须进行手动清理。

实例
第一种方式：在render中，把之前已有的页面去掉，反映到页面中，就是把它删掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试触发顺序，不输入不会触发五个函数，只会触发render</title>
</head>
<body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
        var style={
           color:"red",
           border:"1px solid #f99",
           width:"200px",
           height:"50px"
        };
        var HelloWorld= React.createClass({
            render:function(){
                console.log("render,4");
                return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
            },
            componentWillUnmount:function(){
                console.log("BOOM");
            },
        });
        var HelloUniverse=React.createClass({
            getInitialState:function(){
                return {name:""};
            },
            handleChange:function(event){
                //用来响应input的输入事件
                this.setState({name:event.target.value});
            },
            render:function(){
                if(this.state.name == "123"){
                   return <div>123</div>
                }
                return <div>
                <HelloWorld name={this.state.name
                    //这里引用了HelloWorld的组件，所以HelloUniverse是他的子组件
                }></HelloWorld>
                <br />
                <input type="text" onChange={this.handleChange} />  
                </div>
            },
        });
        React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)
        // 写为React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果
    </script>
</body>
</html>

输入别的不会触发

技术分享

当输入123的时候

第二种：就是使用react提供的一个函数unmountComponentAtNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
        var style={
           color:"red",
           border:"1px solid #f99",
           width:"200px",
           height:"50px"
        };
        var HelloWorld= React.createClass({
            render:function(){
                console.log("render,4");
                return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
            },
            componentWillUnmount:function(){
                console.log("BOOM");
            },
        });
        var HelloUniverse=React.createClass({
            getInitialState:function(){
                return {name:""};
            },
            handleChange:function(event){
                //判断的是input里面的值，如果是123，我们就使用unmountComponentAtNode来删除
                //使用unmountComponentAtNode时，传入的必须是装载时候的节点。


                if(event.target.value == "123"){
                  React.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
                  return;
                }
                this.setState({name:event.target.value});
            },
            render:function(){
                return <div>
                <HelloWorld name={this.state.name
                    //这里引用了HelloWorld的组件，所以HelloUniverse是他的子组件
                }></HelloWorld>
                <br />
                <input type="text" onChange={this.handleChange} />  
                </div>
            },
        });
        React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)
        // 写为React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果
    </script>
</body>
</html>

技术分享

react输入撤销

标签：one onchange min name div charset pre height 3.2

原文地址：http://www.cnblogs.com/shmilysong/p/6119353.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

react输入 撤销

react输入撤销