javascript - ReactJS 用于编辑评论

Question

我正在尝试弄清楚如何在 ReactJS 中编辑评论。我一直在关注this tutorial .

我有几种关于解决方案的理论:

• 使用可变的 state 而不是不可变的 props。
• 与 CommentBox 组件有关，该组件具有 loadCommentsFromServer 和 handleCommentSubmit 功能。 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); 
     }); 
   }); 
 }); 

这是我生成 react 组件的主要脚本文件

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 属性将反射(reflect)组件的状态并将 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 文件后更新更改。

我也想知道是否有更 react 的方式来完成这个 onclick 功能

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

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

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

我的目标是让这段代码尽可能的可读。我试图减少与手头问题不直接相关的代码。我删除了以下代码:

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

Answer 1

让 jQuery 与 React 组件混在一起通常不是一个好主意(尽管 jQuery + React 可以在某些任务中相互配合)；我们正在运行一个大规模的 React 应用程序，并且花了很多时间从我们的早期删除它的实例。

在保存评论方面，您需要一个新端点来处理该功能，它应该看起来几乎与 app.post('/api/comments') 完全一样除了没有得到 data通过读取文件，它应该从 req.body 获取数据，这是发布到它的数据。保持相同的 url this.props.url您可以将其设置为 PATCH 端点:app.patch('/api/comments' ...) .我会把这个实现留给你。 React 保存功能应该像这样发生:Comment组件应该使用状态来管理它的……状态。单击“编辑”应切换该状态以具有 contentEditable设置为true，“编辑”变为“保存”等。实际保存的部分应该在父组件中定义CommentBox并应传递给 Comment成分。以下是您应该进行更改以允许编辑的基本想法，它 100% 未经测试，但希望对您有所帮助。

// changes to Comment component
var Comment = React.createClass({
  getInitialState: function() {
    return {
      contentEditable: false,
      buttonText: 'Edit',
      text: this.props.text
    };
  },
  handleButton: function() {   
    var commentTag = this.refs.comment;
    // if the component is currently editable and the text is different from the original, save it
    if (this.state.contentEditable && commentTag.textContent != this.state.text) {
      this.props.onUpdateComment(this.props.id, commentTag.textContent);
    }
    // invert current contentEditable state Save => Edit or Edit => Save
    var editable = !this.state.contentEditable;
    this.setState({
      contentEditable: editable,
      // update the state to reflect the edited text
      text: commentTag.textContent,
      // change button text based on editable state
      buttonText: editable ? 'Save' : 'Edit'
    });
 },
 render: function() {
   return (
     <div className="comment">
       <h2 className="commentAuthor">{this.props.author}</h2>
       <p ref="comment" contentEditable={this.state.contentEditable}>{this.state.text}</p>
       <button onClick={this.handleButton}>{this.state.buttonText}</button>
     </div>
   );
 }
});

// changes to CommentList
var CommentList = React.createClass({ 
   render: function() { 
     var commentNodes = this.props.data.map(function(comment) { 
       return <Comment onUpdateComment={this.props.onUpdateComment} {...comment} />  
     }); 
     return ( 
       <div className="commentList"> 
         {commentNodes} 
       </div> 
     ); 
   } 
 });

 // changes to CommentBox
 var CommentBox = React.createClass({
   loadCommentsFromServer: function() {
     $.getJSON(this.props.url)
      .then(function(newComments) {
        this.setState({ data: newComments });
      }.bind(this))
      .fail(function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      });
   }, 
   handleCommentSubmit: function(comment) { 
     var comments = this.state.data; 
     comment.id = Date.now(); 
     var newComments = comments.concat([comment]); 
     this.setState({data: newComments}); 

     $.post(this.props.url, comments)
      .then(function(data) {
        this.setState({ data: data });
      }.bind(this))
      .fail(function(xhr, status, err) {
        this.setState({ data: comments });
        console.error(this.props.url, status, err.toString());
      }.bind(this));
   },
   onUpdateComment: function(id, comment) {
     // clone state, we don't want to alter this directly
     var newData = this.state.data.slice(0);
     newData.forEach(function(item) {
       if(item.id === id) {
         item.text = comment;
       }
     });
     $.ajax({
       url: this.props.url,
       dataType: 'json',
       method: 'PATCH',
       data: newData
     }).then(function(data) {
       this.setState({ data: data });
     }.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> 
     ); 
   } 
 });