当调用 onChange 时，react-quill 失去焦点

Question

我在 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 函数并尝试检查文本字段中的内容，它也会显示一些奇怪的行为：

假设我的文本字段最初是空的。我键入字母 'a' 并调用该函数 3 次。首先，它显示文本字段包含字母 'a'，然后再次调用函数显示该字段为空，然后第三次字母 'a' 再次出现。当我继续打字时，这种行为仍然存在。另外，有一个警告说 addRange(): The given range isn't in document. 我不知道它是什么意思。

几天来我一直在为这个问题苦苦挣扎，如果您能提供帮助，我们将不胜感激。谢谢

Answer 1

它在按键时失去焦点的原因可能是因为 quill 组件在重新渲染时正在重新创建。看到同样的 question 打字时失去焦点。

我找不到使用 getFieldDecorator 在 antd 上实现 react quill 的示例，所以我做了一些变通方法使其工作但输出相同。看这个working link我做的

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 在 codesandbox 上不可见。您可以查看 this 相关内容。

当调用 onChange 时，react-quill 失去焦点

react-quill loses focus when onChange is called

richtextbox

reactjs

quill

antd

react-quill