提交帖子成功后react-quill输入框无法重置清空如何解决

核心原因是你使用了defaultValue属性绑定编辑器值，这是非受控组件的用法：defaultValue仅在ReactQuill组件首次挂载时读取一次作为初始内容，后续外层修改comment状态时，组件不会同步响应状态变化，自然不会清空输入框内容。此时你打印外层comment确实是空字符串，但ReactQuill内部维护的编辑器实例内容并没有被更新，才会出现状态正确但视图不变的情况。

基础修复（覆盖绝大多数场景） #

把组件上的defaultValue属性替换为value属性，绑定存储内容的comment状态，将组件切换为受控模式，实现外层状态和编辑器内容的双向绑定，状态更新时组件会自动同步内容：

<ReactQuill
    theme='snow'
    value={comment} // 替换原defaultValue={value}，绑定实际存储内容的comment状态
    onChange={value => setComment(value)}
    modules={{
        toolbar: [
            ['bold', 'italic', 'underline','strike', 'blockquote', 'code-block'],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            ['link', 'image']
        ],
    }}
    placeholder={'Write your post here...'}
/>

替换完成后，原来提交成功回调里的setComment('')逻辑就可以正常触发输入框清空。

兜底方案（处理边缘场景残留问题） #

如果替换后偶发出现编辑器残留空行标签（比如默认的<p><br></p>结构）导致视觉上没有完全清空，可以通过ref直接调用Quill实例的方法强制清空，规避状态值和编辑器内部Delta格式不匹配的问题：

1. 引入ref并绑定到编辑器实例

import { useState, useRef } from 'react'
import ReactQuill from 'react-quill'

// 组件内部声明ref和内容状态
const quillRef = useRef(null)
const [comment, setComment] = useState('')

2. 给ReactQuill组件添加ref属性

<ReactQuill
    ref={quillRef}
    theme='snow'
    value={comment}
    onChange={value => setComment(value)}
    // 其余modules、placeholder配置保持原有逻辑不变
/>

3. 在提交成功的回调中增加实例清空逻辑

if(res.status === 200){
    setComment('')
    // 直接调用编辑器实例方法清空内容
    const editorInstance = quillRef.current.getEditor()
    editorInstance.setContents([])
    setCommentLoading(false)
}

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