我有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状态的一些问题

回答

相关问题