当我开始在其中或任何其他输入字段中键入时，react-quill 组件消失

Question

我有一个 React 应用程序，我正在其中使用 Quill 编辑器来创建帖子。每当我开始在任何字段（包括鹅毛笔编辑器）上输入内容时，编辑器就会完全消失。

这是我的代码：

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';


const CreatePost = () => {

    const modules = {

        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],          // toggled buttons
            ['blockquote', 'code-block'],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],       // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],           // outdent/indent
            [{ 'direction': 'rtl' }],                           // text direction
            [{ 'size': ['small', false, 'large', 'huge'] }],    // custom dropdown
            [{ 'color': [] }, { 'background': [] }],            // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['link'],
            ['clean'],                                          // remove formatting button
            ['video']                                       
        ]
    };

    const htmlFormats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image'
    ];



    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    const [banner, setBanner] = useState('');


    const createNewPost = (e) => {
        e.preventDefault();

        const data = new FormData();
        data.set('title', title);
        data.set('content', content);
        data.set('banner', banner);
        console.log(banner)
    }

    return (
        <>
            <div className="p-4 lg:ml-16">
                <div className="p-4 mt-14">

                    <h2 className='text-center font-Play font-semibold text-2xl mb-10'>Create your story...</h2>

                    <div className='grid gap-4 grid-cols-10 h-full'>
                        <div className=' h-fit w-full col-span-10'>
                            <form onSubmit={createNewPost}>

                                <label htmlFor="title" className="block text-sm font-medium text-gray-700">Ttile</label>
                                <div className="mt-1">
                                    <input value={title} onChange={e=>setTitle(e.target.value)} type='text' id="title" name="title" className="resize-none mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Title goes here" required></input>
                                </div>


                                <label htmlFor='image-upload' className="mt-6 mb-2 block text-sm font-medium text-gray-700">Select a banner</label>
                                <input type="file" onChange={e => setBanner(e.target.files)} id='image-upload' name='banner' accept="image/*" className='rounded-md' required></input>

                                <label htmlFor='body' className="mt-6 mb-2 block text-sm font-medium text-gray-700">Body</label>
                                <div>

                                <ReactQuill value={content} onChange={newValue => setContent(newValue)}  modules={modules} htmlFormats={htmlFormats} id="body" placeholder='Type Content...' ></ReactQuill>
                                </div>

                                <button type="submit" className="mt-8 text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Create</button>

                            </form>
                        </div>
                    </div>
                </div>
            </div >
        </>
    )
}

export default CreatePost

我尝试按照之前的答案进行操作，但没有任何实际帮助。

Answer 1

将模块声明移到组件之外为我解决了这个问题。

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const modules = {
 // Your module settings
 }

const CreatePost = () => {
// your component
};

Answer 2

将模块移到组件之外可以解决问题。确保您是否使用任何图像处理程序或任何将它们放在外面的东西。

Answer 3

将模块移到组件外部，或者如果您仍想在组件内部使用模块，请使用 useMemo