Question

我正在制作一个React页面，其中包含一个帖子并对该帖子发表评论。现在，onChange在被触发时会重新渲染整个类，这会使输入输入变慢。现在，如果在单独的类中声明，并且在输入中输入的值可以发送到主类进行API调用。但是我无法做到这一点。谁能帮我吗？

下面是屏幕上我的评论部分的代码。

commentChange(html) {
  this.setState({ post_comment: html})
}

<div className="post-comments">
   <div className="post-comments-head">
      <div>Comments ({this.state.comments.length})</div>
   </div>
   <div className="comments">
      {this.createCommentList(this.state.comments2)}
   </div>
</div>

<div className="post-commenting">
    {this.state.reply == -1 ? <span>Comment as {this.state.name}</span>
     : this.commentBy()}
    <div className="write-comment-post">
        <ReactQuill 
          data-gramm_editor="false"
          onChange={this.commentChange}
          value={this.state.post_comment}
          className="post_comments_x"
          placeholder="Write a comment"
          ref={(ip) => this.myInp = ip}
          autoFocus={true}
          theme=""
        />
    <div className="comments-submit">
        <button className="submit-comment" 
            onClick={() => this.submitComment(this.state.reply)}
            disabled={!enabledComment}>
            Comment
        </button>
    </div>
  </div>
</div>

createCommentList函数接受注释并返回嵌套的注释列表。以下是添加新评论的部分。如何解决此问题，因为这会使键入新注释非常慢。

Answer 1

<div className="write-comment-post">
    <ReactQuill 
      data-gramm_editor="false"
      onChange={this.commentChange}
      value={this.state.post_comment}
      className="post_comments_x"
      placeholder="Write a comment"
      ref={(ip) => this.myInp = ip}
      autoFocus={true}
      theme=""
    />

为此创建一个单独的组件并且只有onn才能进入call parennt函数，否则onchange会触发

输入React JS的onChange使打字渲染变慢

1 个答案: