【发布时间】：2016-05-21 08:40:11
【问题描述】：
我试图弄清楚如何在 ReactJS 中编辑 cmets。我一直在关注this tutorial。
我对解决方案有几种理论：
- 使用可变的
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() 允许动态更新。旧的 cmets 数组正在被新数组替换
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)
});
},
此函数将数据从子组件传递到父组件。它应该提交到服务器并刷新 cmets 列表
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 - 服务器的监听
- 文本表单的作者字段。我们只需要文本字段
【问题讨论】：
-
关于如何改进这篇文章的任何建议？我只想拥有相关信息，这样最容易解决问题
-
您的实际问题是什么？您有许多代码和文本块，但在任何地方都看不到一个问号。如果您在某处遇到问题，请明确说明问题所在。
标签： javascript jquery reactjs components