reactjs suneditorReacttextarea没有清除

mklgxw1f  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(143)

我正在使用suneditor-react的富文本编辑器。它的所有功能都工作正常,但现在的问题是按下提交按钮后,文本区域应该是空的。
当我运行console.log时,内容显示为空,但它仍然显示在文本区域中。

视图:

<TextField id="title" label="Content title" name="title" value={contenttitle} onChange={(e) => setContenttitle(e.target.value)} autoComplete="title" margin="normal" required fullWidth autoFocus />
      <div>
        <SunEditor setOptions={editorOptions} width="100%" height="500px" setContent="" onChange={setContent} />
      </div>
      <Button onClick={handleSave} variant="contained" sx={{ mt: 3, mb: 2 }}>
        Save
      </Button>

脚本:

const [contenttitle, setContenttitle] = useState("");
const [content, setContent] = useState("");

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("");  //<------- its working but not reflect on text area
      setContenttitle("");//<---- its working
    });
};

**屏幕截图:**x1c 0d1x
控制台:

有没有人能帮我解决这个问题。

pzfprimi

pzfprimi1#

by using useRef, access the editor instance

const editorRef = useRef(null);
<SunEditor ref={editorRef} setOptions={editorOptions} width="100%" 
height="500px" setContent={content} onChange={setContent} />

then on button click call this function

const clear = () => {
// clear editor contents
editorRef.current.editor.setContents("");
};

相关问题