محمود_سعداوي نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 في المثال التالي عند النقر العنصر المحدد لا تتغير className الكود import React,{} from 'react' function Note({title,noteClicked,active}) { return ( <h2 className={`note ${active && "active"} `} onClick={noteClicked}> {title} </h2> ) } export default Note بالرغم أن كل شيء تمام في console Notes.js function Notes({notes}) { const noteClicked = (e) => { console.log('===================================='); console.log(e.currentTarget.classList); console.log('===================================='); } return ( <div className='notes'> { notes?.map(note => <Note key={note.id} title={note.title} content={note.content} noteClicked={noteClicked} /> ) } <button className='add-btn'>+</button> </div> ) } export default Notes صورة الشاشة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 هذا يحدث لأن المتغير active في الكود : <h2 className={`note ${active && "active"} `} onClick={noteClicked}> {title} </h2> حيث ان الكود : active && "active" // غير معرف active يصبح كالتالي لأم الـ undefined && "active" لحل المشكلة قم بوضع الوظيفة noteClicked داخل الملف الخاص بالمكون Note ونضيف كذلك الـ state المسماة active كالتالي : import React, { useState } from "react"; function Note({ title }) { const [active, setActive] = useState(); const noteClicked = () => { setActive(true); }; return ( <h2 className={`note ${active ? "active" : ""} `} onClick={noteClicked}> {title} </h2> ); } export default Note; وكذلك يفضل ان نغير الـ "active && "active إلى الشكل : active ? "active" : "" والذي يعني إذا كان active صحيحاً قم بإعادة "active" وإلا قم بإعادة "" (نص فارغ). وذلك لأن الشكل "active && "active يعيد كلاس بالشكل "note false" بينما الشكل الثاني يعيد "note " عندما يكون المتغير active غير صحيح. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
في المثال التالي عند النقر العنصر المحدد لا تتغير className
الكود
بالرغم أن كل شيء تمام في console
Notes.js
صورة الشاشة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.