调用 onChange 时 react-quill 失去焦点

Posted 2023-02-22

【中文标题】调用 onChange 时 react-quill 失去焦点

【英文标题】：react-quill loses focus when onChange is called

【发布时间】：2021-01-06 17:33:00

【问题描述】：

我在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: '',
    ;

每次组件重新呈现时，我的文本字段都会失去焦点，因此我必须在字段内单击才能输入另一个字母。 我注意到只有在 <ReactQuill> 组件被 antd <Form.Item> 包裹时才会发生这种情况

如果我将console.log 放入onChangeText 函数并尝试检查文本字段中的内容，它也会显示一些奇怪的行为：

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

我已经在这个问题上苦苦挣扎了几天，任何帮助将不胜感激。谢谢

【问题讨论】：

最好在 codesandbox 或任何其他在线 ide 上创建/提供它，以便更好地调试。

这里是codesandbox.io/s/unruffled-booth-z9b5v?file=/src/richText.js

【参考方案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看看。