输入框输入时光标自动跳转聚焦ReactQuill编辑器问题咨询

这个异常是ReactQuill组件重渲染时的默认行为导致的：

• 你将ReactQuill依赖的modules配置对象直接定义在组件函数作用域内部，当页面上的独立输入框触发state更新、整个组件重渲染时，每次生成的modules都是全新的引用地址
• ReactQuill检测到modules属性的引用变化后，会自动销毁并重新初始化编辑器实例，初始化逻辑默认会触发焦点抢占，把光标从当前正在输入的输入框转移到编辑器上，最终导致无法连续输入。

核心思路是保证传给ReactQuill的非值类型属性（比如modules、formats配置）引用稳定，避免不必要的编辑器重初始化，有两种常用实现方式：

• 方案1：将静态的编辑器配置直接移到组件作用域外部，全局只初始化一次，从根源避免重渲染生成新引用

  // 组件外定义静态配置，整个应用生命周期内引用不变
  const quillModules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link", "image"],
      ["clean"]
    ]
  };
  
  function App() {
    const [editorValue, setEditorValue] = useState("");
    const [inputValue, setInputValue] = useState("");
  
    return (
      <div className="App">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <ReactQuill
          theme="snow"
          value={editorValue}
          onChange={setEditorValue}
          modules={quillModules}
        />
      </div>
    );
  }
  

• 方案2：如果编辑器配置需要依赖组件内部的状态，使用useMemo缓存配置对象，仅在配置实际依赖的状态变化时才重新生成新引用

  import { useState, useMemo } from "react";
  import ReactQuill from "react-quill";
  
  function App() {
    const [editorValue, setEditorValue] = useState("");
    const [inputValue, setInputValue] = useState("");
    const [customTool, setCustomTool] = useState([]);
  
    // 仅当customTool变化时才重新生成modules配置
    const quillModules = useMemo(() => ({
      toolbar: [
        [{ header: [1, 2, false] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        customTool
      ]
    }), [customTool]);
  
    return (
      <div className="App">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <ReactQuill
          theme="snow"
          value={editorValue}
          onChange={setEditorValue}
          modules={quillModules}
        />
      </div>
    );
  }
  

补充说明：除了modules属性，ReactQuill的formats、bounds等对象/函数类型的属性，同样需要保证引用稳定，否则也可能触发不必要的重初始化导致焦点异常。

内容的提问来源于stack exchange，提问作者Sukriti Sood