onChange для ввода React JS замедляет процесс печати - PullRequest
Новая
       16

onChange для ввода React JS замедляет процесс печати

0 голосов
/ 23 мая 2019

Я создаю страницу 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 принимает комментарии и возвращает вложенный список комментариев. Ниже находится раздел, где добавлен новый комментарий. Как решить эту проблему, потому что ввод нового комментария очень медленный.

1 Ответ

0 голосов
/ 23 мая 2019 
<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=""
    />

создать отдельный компонент для этого и только при входе в функцию вызова парентного вызова, в противном случае она активирует

...