[Fixed] onChange event issue

mdn · Oct 5, 2023 · a28eba1 · a28eba1
1 parent 5dc43fa
commit a28eba1
Showing 1 changed file with 33 additions and 31 deletions.
diff --git a/src/components/Todo.js b/src/components/Todo.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
 
-
 function usePrevious(value) {
   const ref = useRef();
   useEffect(() => {
@@ -11,7 +10,7 @@ function usePrevious(value) {
 
 export default function Todo(props) {
   const [isEditing, setEditing] = useState(false);
-  const [newName, setNewName] = useState('');
+  const [newName, setNewName] = useState("");
 
   const editFieldRef = useRef(null);
   const editButtonRef = useRef(null);
@@ -22,6 +21,14 @@ export default function Todo(props) {
     setNewName(e.target.value);
   }
 
+  function handleBlur(e) {
+    if (e.target.value === "") {
+      setNewName(props.name);
+      return;
+    }
+    setNewName(e.target.value);
+  }
+
   function handleSubmit(e) {
     e.preventDefault();
     if (!newName.trim()) {
@@ -42,18 +49,17 @@ export default function Todo(props) {
           id={props.id}
           className="todo-text"
           type="text"
-          value={newName || props.name}
+          value={newName || ""}
           onChange={handleChange}
+          onBlur={handleBlur}
           ref={editFieldRef}
         />
       </div>
       <div className="btn-group">
-
         <button
           type="button"
           className="btn todo-cancel"
-          onClick={() => setEditing(false)}
-        >
+          onClick={() => setEditing(false)}>
           Cancel
           <span className="visually-hidden">renaming {props.name}</span>
         </button>
@@ -68,37 +74,34 @@ export default function Todo(props) {
   const viewTemplate = (
     <div className="stack-small">
       <div className="c-cb">
-          <input
-            id={props.id}
-            type="checkbox"
-            defaultChecked={props.completed}
-            onChange={() => props.toggleTaskCompleted(props.id)}
-          />
-          <label className="todo-label" htmlFor={props.id}>
-            {props.name}
-          </label>
-        </div>
-        <div className="btn-group">
+        <input
+          id={props.id}
+          type="checkbox"
+          defaultChecked={props.completed}
+          onChange={() => props.toggleTaskCompleted(props.id)}
+        />
+        <label className="todo-label" htmlFor={props.id}>
+          {props.name}
+        </label>
+      </div>
+      <div className="btn-group">
         <button
           type="button"
           className="btn"
           onClick={() => setEditing(true)}
-          ref={editButtonRef}
-          >
-            Edit <span className="visually-hidden">{props.name}</span>
-          </button>
-          <button
-            type="button"
-            className="btn btn__danger"
-            onClick={() => props.deleteTask(props.id)}
-          >
-            Delete <span className="visually-hidden">{props.name}</span>
-          </button>
-        </div>
+          ref={editButtonRef}>
+          Edit <span className="visually-hidden">{props.name}</span>
+        </button>
+        <button
+          type="button"
+          className="btn btn__danger"
+          onClick={() => props.deleteTask(props.id)}>
+          Delete <span className="visually-hidden">{props.name}</span>
+        </button>
+      </div>
     </div>
   );
 
-
   useEffect(() => {
     if (!wasEditing && isEditing) {
       editFieldRef.current.focus();
@@ -108,6 +111,5 @@ export default function Todo(props) {
     }
   }, [wasEditing, isEditing]);
 
-
   return <li className="todo">{isEditing ? editingTemplate : viewTemplate}</li>;
 }