React Quill 导致在 Quill 的编辑器之外重新渲染 <input>答案

【问题标题】：React Quill causes rerender of <input> outside of Quill's editorReact Quill 导致在 Quill 的编辑器之外重新渲染 <input>
【发布时间】：2022-07-21 17:38:01
【问题描述】：

我的组件中有以下 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 元素，输入的行为是正常的，我不会在控制台中收到任何错误。

这种奇怪和意想不到的行为背后的原因是什么？如何解决？

【问题讨论】：

您输入的每个字母都会更新组件的状态。因此再次渲染。如果 onFocusOut 有一个 React JSX 等价物，你可以用它在很大程度上解决问题。简而言之，尝试使用 onFocusOut 而不是 onChange。
@Y.C.好吧，这难道不是我们在反应中管理输入的方式吗？就像，总是链接到组件的状态。
也许只删除value={richTextValue} 和value={storyTitle} 就可以解决问题。实际上我不确定这一点。它解决了吗？ :)
@Y.C.很抱歉浪费您的时间，我得到了答案并将其发布在这里:')

标签： reactjs quill react-quill

【解决方案1】：

没关系。我有：

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

在添加输入之前的代码中，现在我发现它迫使 React 专注于 Quill 编辑器。

【讨论】：