我在React.js状态方面遇到了一些问题
[英]I have some problems with React.js states
问题描述
I am doing some excercises from tutorials on React.js component states. 
我正在从React.js组件状态的教程中做一些练习。 I must do edit, remove and save buttons to the document and textarea. 我必须编辑，删除并保存按钮到文档和textarea。 I am trying to do them but my browser shows me an empty screen. 我正在尝试这些，但我的浏览器显示我一个空屏幕。 My code: 我的代码：
<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>
What kinda mistakes did I make? 我犯了什么样的错误？
2 个解决方案
解决方案1
0 2017-04-06 08:58:44
Issue is you forgot to call the function, use this: 问题是你忘了调用函数，使用这个：
if (this.state.editing){
return this.renderForm();
}else{
return this.renderNormal();
}
One more thing, i am not sure about the reference you used, Use these it will work: 还有一件事，我不确定您使用的参考，使用它们将起作用：
<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>
Check the working example: 检查工作示例：
<!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>
解决方案2
0 2017-11-07 23:09:13
I'm a n00b but I figured out the problem in your code :-) Mayank's answer helps... you did forget to call the function by adding the () after renderForm() and renderNormal() 我是一个n00b，但我在你的代码中找出问题:-) Mayank的答案有帮助...你忘了通过在renderForm()和renderNormal()之后添加()来调用函数
But even with that answer, the textarea still doesn't show up. 但即使有了这个答案，textarea仍然没有出现。 After 10 minutes of messing with the logic I realized that it's just a typo. 在弄乱逻辑10分钟后，我意识到这只是一个错字。 You wrote <teaxtarea> instead of <textarea> ... fix that typo, along with Mayank's solution, and it fixes your app :-) 你写了<teaxtarea>而不是<textarea> ...修复错字，以及Mayank的解决方案，它修复了你的应用程序:-)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.