javascript - 提交时未清空 SimpleMDE 组件

Question

我有一个 SimpleMDE 文本编辑器组件，我想在提交表单时清空它。
它的状态是空的，但不是文本编辑器的内容。

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";

function App() {
  const [text, setText] = useState("");

  const simplemdeOptions = {
    spellChecker: false,
    status: false,
    minHeight: "50px"
  };

  const handleTextChange = (newText: String) => {
    setText(newText);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // send data to server ...
    // fetch(...);
    console.log("submitted :", text);
    // empty the text editor
    handleTextChange(""); // not working!
  };

  useEffect(() => {
    // text is emptied on submit but not SimpleMDE content
    console.log("useEffect text :", text);
  }, [text]);

  return (
    <form onSubmit={handleSubmit}>
      <SimpleMDE
        value={text}
        onChange={handleTextChange}
        options={simplemdeOptions}
      />
      <button type="submit">OK</button>
    </form>
  );
}

这是沙箱：https ://codesandbox.io/s/simplemde-hooks-ukd8l