gpt4 book ai didi

javascript - 我对 React.js 状态有一些问题

转载 作者:行者123 更新时间:2023-11-28 04:47:17 25 4
gpt4 key购买 nike

我正在根据 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>

我犯了什么错误?

最佳答案

我是一个 n00b,但我发现了你的代码中的问题:-) Mayank 的答案有帮助...你确实忘记通过添加 () 来调用该函数之后renderForm()renderNormal()

但即使有了这个答案,文本区域仍然没有显示。经过 10 分钟的困惑逻辑后,我意识到这只是一个拼写错误。你写了<teaxtarea>而不是<textarea> ...修复该拼写错误以及 Mayank 的解决方案,它可以修复您的应用程序:-)

关于javascript - 我对 React.js 状态有一些问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43250320/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com