React Quill 導致重新渲染<input>在 Quill 的編輯器之外

Question

我的組件中有以下 React 代碼：

     const TextEditor = () => {
     const [richTextValue, setRichTextValue] = useState('');
     const [storyTitle, setStoryTitle] = useState('');
        
     const handleRichEditorOnChange = (content, delta, source, editor) => {
                setRichTextValue(editor.getHTML());
     }
        
     const handleTitleChange = event => {
                setStoryTitle(event.target.value);
     }
        
     return (
                    <>
                        <input type="text"
                               placeholder="Title"
                               value={storyTitle}
                               onChange={handleTitleChange}/>
                        <ReactQuill theme="snow"
                                    value={richTextValue}
                                    onChange={handleRichEditorOnChange}/>
                    </>
    )
}

如果我在<input>元素中輸入任何內容，我會在輸入每個字母后失去焦點，因為 Quill 會以某種方式導致重新渲染，並得到錯誤“當 React 已經在渲染時無法刷新更新”。 但是，如果我刪除ReactQuill元素，輸入的行為是正常的，我不會在控制台中收到任何錯誤。

這種奇怪和意想不到的行為背后的原因是什么？如何解決？

Answer 1

沒關系。 我有：

if (richTextEditorRef.current) {
    richTextEditorRef.current.focus();
}

在添加輸入之前的代碼中，現在我發現它迫使 React 專注於 Quill 編輯器。