javascript - ReactQuill - 提交表单后如何将正文归零？

Question

以下代码不使用 ReactQuill，它按预期工作。表单有标题和正文。数据被存储并提交。

import React, { useState, useLayoutEffect } from "react";
import ReactDOM from "react-dom";
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'; // ES6


function App() {
  const [formState, setValues] = useState({
    workflowTitle: "",
    workflowContent: ""
  });

  const [formSubmit, setValuesFormSubmit] = useState({
    workflowTitleToDB: "",
    workflowContentToDB: ""
  });

  //______________________________________BEGIN handlers to cache form data

  function handleChange(event){
    setValues({
      ...formState,
      [event.target.name]: event.target.value
    });
  }


  //_________________________________________END handlers to cache form data





function createWorkflow(event){

    event.preventDefault()
    setValuesFormSubmit((prev)=>{
        return {...prev,

          workflowTitleToDB: formState.workflowTitle,
          workflowContentToDB: formState.workflowContent

        }
    });


    setValues((prev)=>{

      return {
        ...prev,
        workflowTitle: "",
        workflowContent: ""
        }

    });


  }


  useLayoutEffect(() => {
    console.log(formState);
    console.log(formSubmit);
  });


  return (

    <form onSubmit={createWorkflow}>
      <label>Title</label>
      <br />
      <input onChange={handleChange} name="workflowTitle" value={formState.workflowTitle} />
      <br />

      <textarea onChange={handleChange} name="workflowContent" value={formState.workflowContent} />  
      <br/>
      <input type="submit" value="Create Workflow"/>
    </form>

  );
}




export default App

以下代码将 textarea 元素替换为 ReactQuill。添加了 ReactQuill 的自定义处理程序。除了ReactQuill 的主体没有归零之外，一切都按预期工作。我不知道为什么，我想知道如何解决它。

谢谢你。

import React, { useState, useLayoutEffect } from "react";
import ReactDOM from "react-dom";
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'; // ES6


function App() {
  const [formState, setValues] = useState({
    workflowTitle: "",
    workflowContent: ""
  });

  const [formSubmit, setValuesFormSubmit] = useState({
    workflowTitleToDB: "",
    workflowContentToDB: ""
  });

    //______________________________________BEGIN handlers to cache form data

  function handleChange(event){
    setValues({
      ...formState,
      [event.target.name]: event.target.value
    });
  }


  function textEditorHandleChange(value){ 
    setValues({
      ...formState,
      "workflowContent": value
    });
  }

  //_________________________________________END handlers to cache form data





  function createWorkflow(event){


    event.preventDefault()
    setValuesFormSubmit((prev)=>{
        return {...prev,

          workflowTitleToDB: formState.workflowTitle,
          workflowContentToDB: formState.workflowContent

        }
    });



    setValues((prev)=>{

      return {
        ...prev,
        workflowTitle: "",
        workflowContent: ""
        }

     })


  }


  useLayoutEffect(() => {
    console.log(formState);
    console.log(formSubmit);
  });




  return (

    <form onSubmit={createWorkflow}>
      <label>Title</label>
      <br />
      <input onChange={handleChange} name="workflowTitle" value={formState.workflowTitle} />
      <br />
      <ReactQuill onChange={textEditorHandleChange} defaultValue={formState.workflowContent} theme="snow" />
      <br/>
      <input type="submit" value="Create Workflow"/>
    </form>

  );
}




export default App