I have the following React code in my component:
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}/>
</>
)
}
If i type anything in <input>
element, I lose focus after each letter typed because of Quill causing rerender somehow and get the error "Cannot flush updates when React is already rendering". However, if I remove ReactQuill
element, input's behaviour is normal and I don't receive any error in console.
What is the reason behind this strange and unexpected behaviour and how can it be fixed?
Nevermind. I had:
if (richTextEditorRef.current) {
richTextEditorRef.current.focus();
}
in code before adding input and now I figured out that it was forcing React to focus on Quill editor.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.