調整表單 input change 事件處理器

ginger-lemon · Oct 26, 2023 · 1c9bb11 · 1c9bb11
1 parent 7ab1525
commit 1c9bb11
Showing 1 changed file with 18 additions and 11 deletions.
diff --git a/src/pages/Edit/Edit.js b/src/pages/Edit/Edit.js
@@ -148,17 +148,20 @@ const Edit = () => {
     }
 
     // 資料事件處理器
-    const handleChangeTitle = (e) => {
-        setNote({ ...note, title: e.target.value })
+    const handleSetNote = (e) => {
+        setNote((prev) => ({ ...prev, [e.target.name]: e.target.value}))
     }
+    // const handleChangeTitle = (e) => {
+    //     setNote({ ...note, title: e.target.value })
+    // }
 
-    const handleChangeAuthor = (e) => {
-        setNote({ ...note, author: e.target.value })
-    }
+    // const handleChangeAuthor = (e) => {
+    //     setNote({ ...note, author: e.target.value })
+    // }
 
-    const handleChangeTexts = (e) => {
-        setNote({ ...note, texts: e.target.value})
-    }
+    // const handleChangeTexts = (e) => {
+    //     setNote({ ...note, texts: e.target.value})
+    // }
 
     const handleChangePassword = (e) => {
         // ^字串開頭｜[]允許的字元集合規則｜+複數字元｜$字串結尾
@@ -185,29 +188,32 @@ const Edit = () => {
                     <div className={Styles.inputsWrapper}>
                         <textarea 
                             className={`${Styles.textarea} ${Styles.title}`}
+                            name="title"
                             type="textarea"
                             placeholder="Title"
                             rows={1}
                             ref={titleRef}
                             value={note.title}
-                            onChange={handleChangeTitle}
+                            onChange={handleSetNote}
                         >
                         </textarea>
                         <input 
                             type="text"
                             className={`&{Styles.input} ${Styles.author}`}
+                            name="author"
                             placeholder="Author"
                             value={note.author}
-                            onChange={handleChangeAuthor}
+                            onChange={handleSetNote}
                         >
                         </input>
                         <textarea 
                             className={`${Styles.textarea} ${Styles.texts}`}
+                            name="texts"
                             placeholder="Contents, can write easy markdown type."
                             ref={textsRef}
                             rows={15}
                             value={note.texts}
-                            onChange={handleChangeTexts}
+                            onChange={handleSetNote}
                         >
                         </textarea>
                         <div className={Styles.passwordWrapper}>
@@ -217,6 +223,7 @@ const Edit = () => {
                                 </label>
                                 <input 
                                     className={Styles.password}
+                                    name="password"
                                     type={showPassword ? "text" : "password"}
                                     placeholder="6-12 characters"
                                     mimLength={6}