调用onChange时，react quill会失去焦点

Question

我有一个组件包装在antdForm.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: '',
    };

每次组件重新命名时，我的文本字段都会失去焦点，因此我必须在字段内单击以键入另一个字母。我注意到只有当

假设我的文本字段最初是空的。我输入字母“a”，它会调用函数3次。首先，它显示文本字段包含字母“a”，然后再次调用函数，显示字段为空，然后再次显示第三次字母“a”。当我继续打字时，这种行为仍然存在。此外，还有一条警告说addRange（）：给定的范围不在文档中 我不知道这是什么意思。

我已经为这个问题挣扎了几天了，任何帮助都将不胜感激。非常感谢。




Answer 1

当按键时它失去焦点的原因可能是因为羽毛笔组件在重新渲染时正在重新创建。看到这个关于打字时失去注意力的问题。

我找不到使用getFieldDecorator在antd上实现react quill的示例，所以我做了一些变通，使其能够工作，但输出相同。请参阅我制作的此工作链接。

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之外，并将其替换为hidden

另外，您得到的警告addRange（）：给定的范围不在文档中，在codesandbox上不可见。你可以对此进行调查。