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

Question

我在 antd 中有一个组件包装器Form.create()我想为我的 react-quill 实现验证的 HOC编辑。

          <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

按键时失去焦点的原因可能是因为重新渲染时羽毛笔组件正在重新创建。看到同样的 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在代码和框上不可见。你可以看看this关于那个。