React.jsについて質問したいと思います。今私はReact.jsのエクササイズをやっています。私はいくつかの間違いをしたようです。ボタン、テキストエリアを保存、削除、編集する必要があります。編集ボタンをクリックすると、テキストエリアが表示されます。保存ボタンをクリックすると、すべてのものがデフォルトの状態に戻ります。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(){
var val = this.refs.newText.value;
console.log (val);
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">
<textarea ref ="newText" defaultValue = {this.props.children}></textarea>
<button onClick = {this.save}>Save</button>
</div>
);
},
render: function(){
if (this.state.editing){
return this.renderForm();
}else{
return this.renderNormal();
}
}
});
var Board = React.createClass({
getInitialScale: function(){
return (
comments: ["Ira", "Nata", "Nina"]
)
},
render: function(){
return (
<div className = "board">{
this.state.comments.map(function(text, i){
return (<Comment key = {i}>{text}</Comment>);
})
}
</div>
);
}
});
ReactDOM.render(<Board />, document.getElementById("example"));
</script>
</body>
</html>
は私が間違って何をしますか? よろしくお願いします。