react-quill теряет фокус при вызове onChange

У меня есть оболочка компонента в antd Form.create() HOC, где я хочу реализовать проверку для моего редактора react-quill.

          <Form.Item>
            {getFieldDecorator('input', {
              rules: [RequiredRule],
              initialValue: text,
              onChange: this.onChangeText
            })(
              <ReactQuill
                className="question-form__rich-text"
                modules={quillToolbar}
              />,
            )}
          </Form.Item>

Если я начну печатать в текстовом поле редактора quill, он вызовет функцию onChangeText, которая, в свою очередь, изменит локальное состояние и инициирует повторную визуализацию компонента.

  onChangeText = (_, __, ___, editor) => {
    this.setState({
      textVal: editor.getText(),
    });
  };

 this.state = {
      textVal: '',
    };

Каждый раз, когда компонент выполняет повторную визуализацию, мое текстовое поле теряет фокус, поэтому мне приходится щелкать внутри поля, чтобы ввести другую букву. Я заметил, что это происходит только в том случае, если компонент <ReactQuill> обернут компонентом antd <Form.Item>

Это также показывает какое-то странное поведение, если я помещаю console.log внутрь функции onChangeText и пытаюсь проверить, что внутри текстового поля: введите здесь описание изображения

Допустим, мое текстовое поле изначально пусто. Я набираю букву «а», и она вызывает функцию 3 раза. Сначала он показывает, что текстовое поле содержит букву «а», затем снова вызывает функцию, показывая, что поле пусто, а затем снова появляется третья буква «а». Это поведение сохраняется, пока я продолжаю печатать. Кроме того, есть предупреждение о том, что addRange(): The given range isn't in document. я понятия не имею, что это значит.

Я боролся с этой проблемой в течение нескольких дней, любая помощь будет принята с благодарностью. Спасибо


reactjs antd richtextbox quill react-quill
person Aleksandr Fomin    schedule 20.09.2020    source источник
comment
лучше создать/предоставить его на codesandbox или любую другую онлайн-идею для лучшей отладки.   -  person Chanandrei    schedule 21.09.2020
comment
Вот это codesandbox.io/s/unruffled-booth- z9b5v?file=/src/richText.js   -  person Aleksandr Fomin    schedule 21.09.2020

Ответы (1)


arrow_upward
2
arrow_downward

Причина, по которой он теряет фокус при нажатии клавиши, вероятно, заключается в том, что компонент пера воссоздается при повторном рендеринге. См. этот же вопрос о потере фокуса при наборе текста.

Я не могу найти пример реализации реакции quill на antd с использованием getFieldDecorator, поэтому я сделал небольшой обходной путь, чтобы заставить его работать, но с тем же результатом. См. эту рабочую ссылку. сделанный.

const { getFieldDecorator, validateFields, setFieldsValue } = props.form;

const onChangeText = (text) => {
  console.log("called");
  text = text !== "<p><br></p>" ? text : "";
  setFieldsValue({ input: text });
  setTextVal(text);
};


<Form.Item>
  {getFieldDecorator("input", {
    rules: [{ required: true }],
  })(<Input.TextArea style={{ display: "none" }} />)}
  <ReactQuill
    className="question-form__rich-text"
    modules={quillToolbar}
    defaultValue={textVal}
    onChange={onChangeText}
  />
</Form.Item>

как вы можете видеть в приведенном выше коде, я поместил редактор вне getFieldDecorator и заменил его скрытым <Input>, чтобы ваш набор правил все еще применялся. Компонент quill является неконтролируемым компонентом, и каждый раз, когда он изменяется, он также меняет значение скрытого <Input>, поэтому, когда вы отправляете или получаете значение формы, его значение является значением компонента quill.

Также предупреждение, которое вы получаете addRange(): the given range isn't in the document, не было видно в кодах и ящике. Вы можете изучить это.

person Chanandrei    schedule 21.09.2020