ReactJS 用于编辑注释

我正在尝试弄清楚如何在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 文件后更新对 JSON 文件的更改。

我还想知道是否有一种更反应的方式来完成此点击功能

正如您在组件文件中所看到的，我向呈现文本正文的段落中添加了一个onChange处理程序。

render: function() { 
  return ( 
    <div className="comment"> 
      <p onChange={this.handleTextChange()}> {this.props.text} </p> 
    </div>  
  ); 
}  

我已经在互联网上广泛搜索了编辑功能的示例，但找不到任何东西。

我的目标是使这段代码尽可能可读。我试图修剪与手头问题不直接相关的代码。我删除了以下代码：

• npm 变量和app.use的声明
• 服务器的监听
• 文本表单的作者字段。我们只需要文本字段