如何更新状态只有当用户开始在文本编辑器中输入?

Question

我有下面的代码相关的文本编辑器，我只感兴趣设置编辑器的状态，当用户开始在编辑器中输入文本。

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

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

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

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

我已经使用react羽毛笔在下一个JS文本编辑器。这是下一个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;

Answer 1

您需要在输入时绑定函数:

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