3

我在 HOC 中有一个组件包装器antd Form.create()，我想在其中为我的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.我不知道​​它是什么意思。

几天来我一直在努力解决这个问题，任何帮助将不胜感激。谢谢

4

1 回答 1

2

按键时它失去焦点的原因可能是因为重新渲染时羽毛笔组件正在重新创建。请参阅有关键入时失去焦点的相同问题。

我找不到使用 antd 在 antd 上实现 react quill 的示例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 组件是非受控组件，每次发生变化都会改变 hidden 的值，<Input>所以当你提交或获取表单的值时，它的值就是 quill 组件的值。

此外，您收到的警告addRange(): the given range isn't in the document在代码框上也不可见。您可能会对此进行调查。

于 2020-09-21T08:34:27.487 回答