suneditor-react提交后编辑器内容无法清空问题求助

你当前的代码里，SunEditor组件的setContent属性写死成了空字符串""，并没有和你的content状态变量做绑定。这就导致当你调用setContent("")更新状态时，编辑器组件无法感知到状态变化，自然不会同步清空界面内容——而TextField因为用value={contenttitle}做了双向绑定，所以状态更新能正常生效。

方案1：绑定setContent到状态变量（推荐） #

直接把SunEditor的setContent属性绑定到你的content状态，这样状态变化时编辑器会自动同步内容：

修改视图代码中的SunEditor部分：

<div>
  <SunEditor 
    setOptions={editorOptions} 
    width="100%" 
    height="500px" 
    setContent={content}  {/* 这里改成绑定content状态 */}
    onChange={setContent} 
  />
</div>

这样当你在handleSave里调用setContent("")时，编辑器会立刻响应状态变化，清空界面内容。

方案2：使用Ref直接操作编辑器实例 #

如果方案1不生效，或者你需要更直接的控制，可以通过Ref获取编辑器实例，调用内置的清空方法：

1. 先创建Ref：

import { useRef } from 'react';

const sunEditorRef = useRef(null);

2. 修改SunEditor组件绑定Ref：

<div>
  <SunEditor 
    ref={sunEditorRef}  {/* 绑定ref */}
    setOptions={editorOptions} 
    width="100%" 
    height="500px" 
    setContent={content}
    onChange={setContent} 
  />
</div>

3. 在handleSave里调用清空方法：

const handleSave = () => {
  console.log("save editor content: ", content);
  // ... 其他逻辑

  dispatch(updatemasteractivitiesThunk({ _id, body }))
    .then(() => showModal("info", "confirm", "Do you want to create another content?"))
    .then(() => {
      setContent("");
      setContenttitle("");
      // 调用编辑器的清空方法
      sunEditorRef.current?.core?.setText("");
      // 或者用setContent方法：sunEditorRef.current?.setContent("");
    });
};

第一种方案是符合React数据驱动的常规做法，优先推荐；第二种方案适合一些特殊场景下的直接DOM操作需求。

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