How to update the state only when user start typing in text editor?

Question

I have below code related to text editor and i am only interested to set the state of editor when user start typing the text in editor.

Need to update the state only for below scenario:-

1 Update the state only when user start typing the text in text editor.

2.Update state when user start typing the text in text in text editor but he removed the entire text whatever he entered previously. In that case also wanted to update the state.

3.Don't want to update the state when user hasn't start typing in text editor.

I have use react quill for text editor in next JS. This is next JS project.

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;

Given that `onChange` works exactly like that, can you clarify what the problem is? — , Mar 06 '21 at 12:34
when I reload the page , setBody is getting executed and updating the state with empty html value "

". — Piyush, Mar 06 '21 at 12:38
did you try `onInput` instead? check this decision [here](https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput) — Joseph, Mar 06 '21 at 12:39
To set initial state based on localStorage, use `useEffect(() => { ... }, []);` (also, you should edit your question. Put the comment describing the problem in the question itself, and remove your incorrect assumptions about `onChange` being the source of the problem) — , Mar 06 '21 at 12:41

score 0 · Answer 1 · answered Mar 06 '21 at 12:49

0

you need to binding function on input:

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

answered Mar 06 '21 at 12:49

danhuong

202
1
8

How to update the state only when user start typing in text editor?

1 Answers1