react輸入撤銷

最後更新：2016-11-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：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輸入撤銷

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More