输入的onChange React JS使得输入渲染变慢

Question

I am making a React page which has a post and comments on the post. Now the onChange on being triggered re-renders the whole class which makes the typing in input slow. Now, if the is declared in a separate class and the value entered in the input there can be sent to the main class for API call. But I am not able to do this. Can anyone help me?

Below is code for my comment section of the screen.

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>

The createCommentList function takes comments and returns a nested list of comments. Below is the section where new comment is added. How to solve this because it is making typing a new comment very slow.

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=""
    />

create a seperate component for this and only onn enter call parennt function else onchange it will trigger