我有React.js狀態的一些問題

我正在從React.js組件狀態的教程做一些練習。我必須做編輯，刪除和保存按鈕到文檔和textarea。我正在嘗試做，但我的瀏覽器顯示爲空屏幕。我的代碼：我有React.js狀態的一些問題

<html> 
<head> 

    <script src = "react-master/../js/react.js"></script> 
    <script src = "react-master/../js/react-dom.js"></script> 
    <script src = "js/browser.js"></script> 

</head> 
<body> 

    <div id = "example"></div> 

    <script type = "text/babel"> 
     var Comment = React.createClass({ 
      getInitialState: function(){ 
       return {editing: false} 
      }, 
      edit: function(){ 
       this.setState({editing: true}); 
      }, 
      remove: function(){ 
       console.log("Removing comments"); 
      }, 
      save: function(){ 
       this.setState({editing: false}); 
      }, 
      renderNormal: function(){ 
       return(
        <div className = "comment-container"> 
         <div className = "comment-text">{this.props.children}</div> 
         <button onClick = {this.edit}>Edit</button> 
         <button onClick = {this.remove}>Remove</button> 
        </div> 
       ); 
      }, 
      renderForm: function(){ 
       return(
        <div className = "comment-container"> 
         <teaxtarea defaultValue = {this.props.children}></teaxtarea> 
         <button onClick = {this.save}>Save</button> 
        </div> 
       ); 
      }, 
      render: function(){ 
       if (this.state.editing){ 
        return this.renderForm; 
       }else{ 
        return this.renderNormal; 
       } 
      } 
     }); 
     ReactDOM.render(
      <div className = "board"> 
       <Comment>Hey now</Comment> 
       <Comment>Hey Anja</Comment> 
       <Comment>Hey Olga</Comment> 
      </div>, 
      document.getElementById("example")); 
    </script>

我犯了什麼錯誤？

來源

2017-04-06 Aleks339

我認爲，問題是你忘了打電話的功能，使用此：

if (this.state.editing){ 
    return this.renderForm(); 
}else{ 
    return this.renderNormal(); 
}

還有一兩件事，我不知道你使用的參考，使用這些它將工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

檢查工作示例：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 

 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
 

 
    </head> 
 
    <body> 
 

 
     <div id = "example"></div> 
 

 
     <script type = "text/babel"> 
 
      var Comment = React.createClass({ 
 
      getInitialState: function(){ 
 
       return {editing: false} 
 
      }, 
 
      edit: function(){ 
 
       this.setState({editing: true}); 
 
      }, 
 
      remove: function(){ 
 
       console.log("Removing comments"); 
 
      }, 
 
      save: function(){ 
 
       this.setState({editing: false}); 
 
      }, 
 
      renderNormal: function(){ 
 
       return(
 
        <div className = "comment-container"> 
 
         <div className = "comment-text">{this.props.children}</div> 
 
         <button onClick = {this.edit}>Edit</button> 
 
         <button onClick = {this.remove}>Remove</button> 
 
        </div> 
 
       ); 
 
      }, 
 
      renderForm: function(){ 
 
       return(
 
        <div className = "comment-container"> 
 
         <teaxtarea defaultValue = {this.props.children}></teaxtarea> 
 
         <button onClick = {this.save}>Save</button> 
 
        </div> 
 
       ); 
 
      }, 
 
      render: function(){ 
 
       if (this.state.editing){ 
 
        return this.renderForm(); 
 
       }else{ 
 
        return this.renderNormal(); 
 
       } 
 
      } 
 
     }); 
 
     ReactDOM.render(
 
      <div className = "board"> 
 
       <Comment>Hey now</Comment> 
 
       <Comment>Hey Anja</Comment> 
 
       <Comment>Hey Olga</Comment> 
 
      </div>, 
 
      document.getElementById("example")); 
 
     </script> 
 
    </body> 
 
</html>

來源

2017-04-06 08:58:44

我是一個的n00b，但我在你的代碼:-) Mayank的答案想通了這個問題有所幫助...你沒忘加上調用該函數的()後renderForm()和renderNormal()

但即使有了這個答案，textarea仍然沒有出現。經過10分鐘的邏輯混亂之後，我意識到這只是一個錯字。你寫了<teaxtarea>而不是<textarea> ......修復了打字錯誤以及Mayank的解決方案，它修復了你的應用程序:-)

來源

2017-11-07 23:09:13

我有React.js狀態的一些問題

回答

相關問題