仅当用户开始在文本编辑器中输入时如何更新状态？答案

【问题标题】：How to update the state only when user start typing in text editor?仅当用户开始在文本编辑器中输入时如何更新状态？
【发布时间】：2021-03-06 12:32:19
【问题描述】：

我有以下与文本编辑器相关的代码，我只想在用户开始在编辑器中输入文本时设置编辑器的状态。

仅在以下情况下需要更新状态：-

1 仅当用户开始在文本编辑器中输入文本时更新状态。

2.当用户开始在文本编辑器中输入文本时更新状态，但他删除了他之前输入的整个文本。在那种情况下也想更新状态。

3.当用户还没有开始在文本编辑器中输入时，不想更新状态。

我在下一个 JS 中将 react quill 用于文本编辑器。这是下一个 JS 项目。

import {useState} from "react";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";

const CreatePost = () => {
 const blogFormLS = () => {
    if (typeof window === "undefined") {
      return false;
    }
    if (localStorage.getItem("blog")) {
      return JSON.parse(localStorage.getItem("blog"));
    } else {
      return false;
    }
  };
 const [body, setBody] = useState(blogFormLS());
 const [values, setValues] = useState({
    error: "",
    sizeError: "",
    success: "",
    formData: "",
    title: "",
  });
const handleChange = (name) => (e) => {
    formData.set(name);
    setValues({ ...values, [name]: value, formData, error: "" });
  };

  const handleBody = (e) => {
    setBody(e);
    formData.set("body", e);
    if (typeof window !== "undefined") {
      localStorage.setItem("blog", JSON.stringify(e));
    }
  };
return () {
<>
 <form onSubmit={publishBlog}>
        <div className="form-group">
          <lable className="text-muted">Title</lable>
          <input
            type="text"
            value={title}
            className="form-control"
            onChange={handleChange("title")}
          />
        </div>
        <div className="form-group">
          <ReactQuill
            value={body}
            placeholder="Write something amazing..."
            onChange={handleBody}
            modules={CreatePost.modules}
            formats={CreatePost.formats}
          />
        </div>
</form>
</>
}
}

CreatePost.modules = {
  toolbar: [
    [{ header: "1" }, { header: "2" }, { header: [3, 4, 5, 6] }, { font: [] }],
    [{ size: [] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [{ list: "ordered" }, { list: "bullet" }],
    ["link", "image", "video"],
    ["clean"],
    ["code-block"],
  ],
};

CreatePost.formats = [
  "header",
  "font",
  "size",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "link",
  "image",
  "video",
  "code-block",
];

export default CreatePost;

【问题讨论】：

鉴于onChange 的工作原理完全一样，您能否澄清问题所在？
当我重新加载页面时，setBody 正在执行并使用空 html 值“

”更新状态。
您尝试过onInput 吗？检查这个决定here
要基于 localStorage 设置初始状态，请使用 useEffect(() => { ... }, []);（另外，您应该编辑您的问题。将描述问题的评论放在问题本身中，并删除您对 onChange 存在的错误假设问题的根源）

标签： javascript reactjs next.js

【解决方案1】：

你需要在输入上绑定函数：

<input
            type="text"
            value={title}
            className="form-control"
            onChange={() => handleChange("title")}
          />

【讨论】：