React/Next.js中QuillNoSSRWrapper无法输入修改值的解决办法

你的问题核心是编辑器的value未与状态变量联动，导致输入时无法更新内容，具体修复步骤如下：

• 初始化状态时传入需要显示的初始值，而非空字符串
• 将编辑器的value属性绑定到状态变量content，而非固定字符串

修改后的完整代码：

const Post = function(props) {
  // 初始化state为要显示的初始内容
  const [content, setContent] = useState('abc');

  return (
    <QuillNoSSRWrapper 
      modules={modules}  
      theme="snow" 
      onChange={(newContent) => {
        setContent(newContent);
      }} 
      value={content} // 绑定状态变量实现双向更新
    />
  );
}

额外排查点 #

如果修改后仍无法输入，可检查以下内容：

• 确认modules配置未禁用输入功能，比如toolbar是否正常配置，是否意外添加了只读相关模块
• 确保QuillNoSSRWrapper的导入正确，Next.js环境下是否正确处理了SSR渲染逻辑（比如组件是否仅在客户端渲染）

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