Как показать счетчик символов в React-quill - PullRequest
Новая
       57

Как показать счетчик символов в React-quill

0 голосов
/ 27 апреля 2020

Я хотел бы добавить счетчик персонажей на свой React Quill. На данный момент у меня есть ограничитель символов 950. Проблема в том, что пользователь должен знать, что количество символов не должно превышать 950, поэтому счетчик символов, который я пытался добавить getLength() на рендере, но дает мне ошибка. Это мой код: 

attachQuillRefs = () => {
    if (typeof this.reactQuillRef.getEditor !== "function") return;
    this.quillRef = this.reactQuillRef.getEditor();
  };

  //Handles changes to description field
  handleDetailChange(value) {
    var limit = 950;
    var quill = this.quillRef;
    quill.on("text-change", function (delta, old, source) {
      if (quill.getLength() > limit) {
        quill.deleteText(limit, quill.getLength());
      }
    });
    this.setState({
      detail: value,
    });
  }

при рендере: 

<ReactQuill
     ref={(el) => {
        this.reactQuillRef = el;
     }}
     onChange={this.handleDetailChange}
        value={this.state.detail || ""}
     >
     <p>{this.reactQuillRef.getLength() + "/950"}</p>
</ReactQuill>
...