4
我想弄清楚如何在ReactJS中编辑注释。我一直在关注this tutorial。ReactJS编辑注释
有几种说法我有解决方案：
- 使用可变
state，而不是一成不变的props。 - 与具有
loadCommentsFromServer和handleCommentSubmit功能的CommentBox组件有关。loadComments函数会触发一个AJAX请求，可能是我的comments.json文件。
下面是来自server.js文件中的相关代码
var COMMENTS_FILE = path.join(__dirname, 'comments.json');
app.get('/api/comments', function(req, res) {
fs.readFile(COMMENTS_FILE, function(err, data) {
if (err) { /* Print error to console */ }
res.json(JSON.parse(data));
});
});
// This snippet of code is probably the most important
app.post('/api/comments', function(req, res) {
fs.readFile(COMMENTS_FILE, function(err, data) {
if (err) { /* Print error to console */ }
var comments = JSON.parse(data);
var newComment = {
id: Date.now(),
text: req.body.text,
};
comments.push(newComment);
fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) {
if (err) { /* Print error to console */ }
res.json(comments);
});
});
});
这里就是我产生我的主要脚本文件反应的组分
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
// Trying to change the value of the text box on edit
<p onChange={this.handleTextChange()}> {this.props.text} </p>
</div>
);
}
});
var CommentBox = React.createClass({
当第一次创建的组件，我们需要得到JSON来自服务器的数据并用最新数据更新state。 this.setState()允许动态更新。旧的一系列评论正在被新版本所取代
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
此函数将数据从子组件传递到父组件。它应该提交给服务器并刷新评论列表
handleCommentSubmit: function(comment) {
var comments = this.state.data;
comment.id = Date.now();
var newComments = comments.concat([comment]);
this.setState({data: newComments});
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: comment,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
this.setState({data: comments});
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return <Comment key={comment.id}>{comment.text}</Comment>
});
return <div className="commentList"> {commentNodes} </div>
);
}
});
此处正在创建一个组件用于填写表单。 this.state用于保存输入时的用户输入。我试图用编辑功能来完成这个任务。
var CommentForm = React.createClass({
getInitialState: function() {
return {text: ''};
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
// This is also probably an important function
handleSubmit: function(e) {
e.preventDefault();
var text = this.state.text.trim();
this.props.onCommentSubmit({text: text});
this.setState({text: ''});
},
输入元素的value属性将反映组件的状态和连接onChange处理他们
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" value={this.state.text} onChange={this.handleTextChange} />
<input type="submit" value="Post" />
</form>
);
}
});
最后，我渲染CommentBox组件。 url属性从服务器获取动态数据。 pollInterval每2秒重新加载页面。
ReactDOM.render(
<CommentBox url="/api/comments" pollInterval={2000} />,
document.getElementById('content')
);
这里是我的关于如何实现编辑功能
setTimeout(function() {
$('.edit').on('click', function() {
$(this).prev().prop('contentEditable', 'true');
$(this).prev().focus();
});
},1000);
我不得不使用setTimeout因为它会需要一些时间来加载组件的文件之前的想法。然后，我会监听点击编辑按钮，并将html5 contentEditable属性更改为true。
我遇到的问题是在更改JSON文件的更改后进行编辑。
我也想知道是否有完成这个的onclick功能
正如你可以在我的组件的文件中看到的更多的反应方式，我添加了一个onChange处理段落呈现文本的身体。
render: function() {
return (
<div className="comment">
<p onChange={this.handleTextChange()}> {this.props.text} </p>
</div>
);
}
我已经在网上搜索了广泛的编辑功能的例子，但是找不到任何东西。
我的目标是让这段代码尽可能可读。我试图削减与手头问题无关的代码。我已删除下面的代码：
- NPM变量的宣言和
app.use - 服务器
- 文本形式作者字段的听力。我们只需要在文本字段
有关如何改进此职位的任何建议？我只想拥有相关信息，因此最容易解决问题 –
您的实际问题是什么？你有许多代码和文本块，但没有一个问号可以在任何地方看到。如果你在某个地方遇到问题，请清楚地说明它是什么。 –