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

在按键时失去焦点的原因可能是因为在重新渲染时正在重新创建主轴组件。看到与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>替换了它，因此您的规则集仍然适用。笔芯组件是不受控制的组件，每次更改时，它也会更改隐藏的<Input>的值，因此当您提交或获取表单的值时，它的值就是笔芯组件的值。 / p>

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

调用onChange时react-quill失去焦点

1 个答案: