محمود_سعداوي نشر 24 نوفمبر 2022 أرسل تقرير مشاركة نشر 24 نوفمبر 2022 السلام عليكم في المثال التالي أريد تعديل الملاحظة و حفضها على الجهة اليسرى عند النقر على Edit يقع تحديث الصفحة و العودة إلى صفحة البداية. جربت () preventDefault ولكن دون جدوى. الشيفرة: import React, {useState} from 'react' import Notes from './Notes/Notes'; import './App.css'; import AddNoteForm from './AddNoteForm/AddNoteForm'; import NoteContainer from './NoteContainer/NoteContainer'; function App() { const [notes,setNotes] = useState([]) const [title,setTitle] = useState('') const [content,setContent] = useState('') const [selectedNote,setSelectedNote] = useState(null) const [error,setError] = useState(false) const [creating,setCreating] = useState(false) const [showNote,setShowNote] = useState(false) const [editing,setEditing] = useState(true) const handleChange_title = (e) => { setTitle(e.target.value) } const handleChange_content = (e) => { setContent(e.target.value) } const saveNoteHandler = (e) =>{ e.preventDefault() if (title.length === 0 || content.length === 0) { setError(true) } else{ setError(false) const note = { id : new Date(), title : title, content : content } const updatedNotes = [...notes,note] setNotes(updatedNotes) setSelectedNote(note.id) } setTitle('') setContent('') } const handleAddNote = () => { setCreating(true) setTitle('') setContent('') } const noteClicked = (id) => { setCreating(false) let theClickedNote = notes.find((note)=> note.id === id) setContent(theClickedNote.content) setTitle(theClickedNote.title) setSelectedNote(theClickedNote.id) setShowNote(true) } const deleteNoteHandler = (selectedNote) =>{ const updatedNotes = [...notes] const findIndex = updatedNotes.findIndex(note => note.id === selectedNote ) updatedNotes.splice(findIndex,1) setSelectedNote(null) setNotes(updatedNotes) setShowNote(false) } const updateNoteHandler = (selectedNote) =>{ setCreating(true) setEditing(false) const updatedNotes = [...notes] const noteIndex = notes.findIndex(note => note.id === selectedNote) updatedNotes[noteIndex] = { id: selectedNote, title: title, content: content } setNotes(updatedNotes) console.log(updatedNotes[noteIndex]) } const editNoteHandler = (selectedNote) => { const updatedNotes = [...notes] const noteIndex = notes.findIndex(note => note.id === selectedNote) updatedNotes[noteIndex] = { id: selectedNote, title: title, content: content } console.log('===================================='); console.log( updatedNotes[noteIndex].title); console.log('===================================='); } return ( <div className='app'> <Notes className='notes' notes={notes} handleAddNote={handleAddNote} noteClicked={noteClicked} /> { !creating ? <NoteContainer className='' title = {title} content = {content} showNote = {showNote} deleteNoteHandler = {deleteNoteHandler} updateNoteHandler={updateNoteHandler} selectedNote = {selectedNote} /> : <AddNoteForm className='add-note-form' saveNoteHandler={saveNoteHandler} handleChangeContent={handleChange_content} handleChangeTitle={handleChange_title} error={error} title={title} content={content} editing = {editing} editNoteHandler = {editNoteHandler} selectedNote = {selectedNote} /> } </div> ); } export default App; اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Sam Ahw نشر 24 نوفمبر 2022 أرسل تقرير مشاركة نشر 24 نوفمبر 2022 مع أن الشيفرة البرمجية المرفقة غير كاملة، ولكن بشكل عام عند وجود أكثر من زر داخل النموذج form، سيتم اعتبار حدث النقر على أي زر بمثابة submit لذلك يجب عليك إضافة الخاصية التالية للأزرار الثانوية الموجودة ضمن النموذج form: <button type="button">Edit</button> ^^^^^^^^^^^^^ إضافة هذه الخاصية ستمنع إرسال النموذج submit 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 24 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 24 نوفمبر 2022 بتاريخ 1 دقيقة مضت قال Sam Ahw: مع أن الشيفرة البرمجية المرفقة غير كاملة، ولكن بشكل عام عند وجود أكثر من زر داخل النموذج form، سيتم اعتبار حدث النقر على أي زر بمثابة submit لذلك يجب عليك إضافة الخاصية التالية للأزرار الثانوية الموجودة ضمن النموذج form: <button type="button">Edit</button> ^^^^^^^^^^^^^ إضافة هذه الخاصية ستمنع إرسال النموذج submit <input className='input-btn input' type='submit' value='Edit' onClick = {editNoteHandler} /> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Sam Ahw نشر 24 نوفمبر 2022 أرسل تقرير مشاركة نشر 24 نوفمبر 2022 كل من الطريقتين صحيح لكتابة الزر: <input type="button"> أو <button type="button"> لذا حاول تغيير الخاصية type إلى button بدلاً من submit حتى لايتم تحديث الصفحة عند الضغط على الزر. وسيتم تنفيذ التابع editNoteHandler اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 24 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 24 نوفمبر 2022 بتاريخ 54 دقائق مضت قال Sam Ahw: كل من الطريقتين صحيح لكتابة الزر: <input type="button"> أو <button type="button"> لذا حاول تغيير الخاصية type إلى button بدلاً من submit حتى لايتم تحديث الصفحة عند الضغط على الزر. وسيتم تنفيذ التابع editNoteHandler وجدت الحل بالطريقة التالية import React, {useState} from 'react' import Notes from './Notes/Notes'; import './App.css'; import AddNoteForm from './AddNoteForm/AddNoteForm'; import NoteContainer from './NoteContainer/NoteContainer'; function App() { const [notes,setNotes] = useState([]) const [title,setTitle] = useState('') const [content,setContent] = useState('') const [selectedNote,setSelectedNote] = useState(null) const [error,setError] = useState(false) const [creating,setCreating] = useState(false) const [showNote,setShowNote] = useState(false) const [editing,setEditing] = useState(true) const handleChange_title = (e) => { setTitle(e.target.value) } const handleChange_content = (e) => { setContent(e.target.value) } const saveNoteHandler = (e) =>{ e.preventDefault() if (title.length === 0 || content.length === 0) { setError(true) } else{ setError(false) const note = { id : new Date(), title : title, content : content } const updatedNotes = [...notes,note] setNotes(updatedNotes) setSelectedNote(note.id) } setTitle('') setContent('') } const handleAddNote = () => { setCreating(true) setTitle('') setContent('') } const noteClicked = (id) => { setCreating(false) let theClickedNote = notes.find((note)=> note.id === id) setContent(theClickedNote.content) setTitle(theClickedNote.title) setSelectedNote(theClickedNote.id) setShowNote(true) } const deleteNoteHandler = (selectedNote) =>{ const updatedNotes = [...notes] const findIndex = updatedNotes.findIndex(note => note.id === selectedNote ) updatedNotes.splice(findIndex,1) setSelectedNote(null) setNotes(updatedNotes) setShowNote(false) } const updateNoteHandler = (selectedNote) =>{ setCreating(true) setEditing(false) const updatedNotes = [...notes] const noteIndex = notes.findIndex(note => note.id === selectedNote) updatedNotes[noteIndex] = { id: selectedNote, title: title, content: content } setNotes(updatedNotes) } const editNoteHandler = (e) => { e.preventDefault() const updatedNotes = [...notes] const noteIndex = notes.findIndex(note => note.id === selectedNote) // setTitle(updatedNotes[noteIndex].title) updatedNotes[noteIndex] = { id: selectedNote, title: title, content: content } setNotes(updatedNotes) setEditing(true) setTitle('') setContent('') // setCreating(false) // setShowNote(false) } return ( <div className='app'> <Notes className='notes' notes={notes} handleAddNote={handleAddNote} noteClicked={noteClicked} /> { !creating ? <NoteContainer className='' title = {title} content = {content} showNote = {showNote} deleteNoteHandler = {deleteNoteHandler} updateNoteHandler={updateNoteHandler} selectedNote = {selectedNote} /> : <AddNoteForm className='add-note-form' saveNoteHandler={saveNoteHandler} handleChangeContent={handleChange_content} handleChangeTitle={handleChange_title} error={error} title={title} content={content} editing = {editing} editNoteHandler = {editNoteHandler} selectedNote = {selectedNote} /> } </div> ); } export default App; شكرا على المساعدة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم
في المثال التالي أريد تعديل الملاحظة و حفضها على الجهة اليسرى
عند النقر على Edit يقع تحديث الصفحة و العودة إلى صفحة البداية.
جربت () preventDefault ولكن دون جدوى.
الشيفرة:
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.