react 學習--元件的生命週期(三)銷燬階段

xiaopengyaonixi發表於2016-10-24
 var HelloWorld = React.createClass({
         render:function () {
             return (
                     <p>
                         Hello,{this.props.name?this.props.name:' World'}
                         <span ref="tip"></span>
                     </p>
             );
         },

     });
     var Test = React.createClass({
         getInitialState:function () {
             return {
                 "name":""
             };
         },
         handleChange:function () {
             if(this.refs.myInput.value=="#"){
                 ReactDOM.unmountComponentAtNode(document.getElementById("app"));
             }else{
                 this.setState({
                     "name":this.refs.myInput.value
                 });
             }
         },
         render:function () {
             return(
                     <div>
                         <HelloWorld name={this.state.name}/><br/>
                         <input ref="myInput" type="text" onChange={this.handleChange} />
                     </div>
             );
         },
         // 元件將要被銷燬時
         componentWillUnmount: function() {
             console.log("BOOOOOOOOOOOOOOOOOM!");
         },
     });
     ReactDOM.render(<Test />,document.getElementById("app"));

相關文章