محمود_سعداوي نشر 5 ديسمبر 2022 أرسل تقرير مشاركة نشر 5 ديسمبر 2022 السلام عليكم. عندي مشكل في تحديد العنصر الذي أريده. في المثال التالي عندما أضغط على زر like تتحول كافة العناصر إلى dislike وليس العنصر المحدد. مثلما تلاحظون كافة المنتجات dislike قمت باستعمال الدالة find و كن دون جدوى. function App() { const [toggleLike,setToggleLike] = useState(false) const handleClick = (id) => { data.find(item => item.id === id) console.log(data); setToggleLike(!toggleLike) } return ( <div className="App"> <Header/> <div className='main'> <Aside/> { <div className='products-section'> { data.map(product => ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} handleClick = {()=>handleClick(product.id)} toggleLike = {toggleLike} /> )) } </div> } </div> </div> ); } function Product({id,img,title,price,handleClick,toggleLike}) { return ( <div className='card'> <div className='product-price'>{price} dt</div> <img src={img} className="card-img" alt=""/> <div className="card-body"> <h5 className="card-title">{title}</h5> <div className='cart-btns'> <button type="button" className="like-btn" onClick={handleClick}> { toggleLike ? <BsFillHandThumbsDownFill/> : <BsFillHandThumbsUpFill/> } </button> {/* <button type="button" className="like-btn"></button> */} <button type="button" className="add-to-cart-btn"><BsCartFill/></button> </div> </div> {/* <Rating /> */} </div> ) } شكرا على المساعدة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 5 ديسمبر 2022 أرسل تقرير مشاركة نشر 5 ديسمبر 2022 هي يمكنك مشاركة ملفات المشروع حتى استطيع الاطلاع على المشكلة بشكل افضل. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 5 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 5 ديسمبر 2022 بتاريخ 1 دقيقة مضت قال عمر قره محمد: هي يمكنك مشاركة ملفات المشروع حتى استطيع الاطلاع على المشكلة بشكل افضل. تفضل src.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 5 ديسمبر 2022 أرسل تقرير مشاركة نشر 5 ديسمبر 2022 بتاريخ 50 دقائق مضت قال محمود سعداوي: تفضل src.zip عدل الوظيفة handleClick في الملف app.js إلى الشكل التالي : const handleClick = (id) => { let findProd = data.find(item => item.id === id) // التعديل حدث هنا console.log(findProd); // console.log(selectedProduct); setSelectedProduct(findProd.id) setToggleLike(!toggleLike) } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 6 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 6 ديسمبر 2022 بتاريخ 8 ساعات قال عمر قره محمد: عدل الوظيفة handleClick في الملف app.js إلى الشكل التالي : const handleClick = (id) => { let findProd = data.find(item => item.id === id) // التعديل حدث هنا console.log(findProd); // console.log(selectedProduct); setSelectedProduct(findProd.id) setToggleLike(!toggleLike) } نفس المشكل أخي. عند النقر على like الخاصة بمنتج محدد تصبح كافة المنتجات dislike اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 6 ديسمبر 2022 أرسل تقرير مشاركة نشر 6 ديسمبر 2022 بتاريخ 18 دقائق مضت قال محمود سعداوي: نفس المشكل أخي. عند النقر على like الخاصة بمنتج محدد تصبح كافة المنتجات dislike في سؤالك كنت تقول ان المشكلة في تحديد العنصر الذي تريده : بتاريخ 11 ساعات قال محمود سعداوي: عندي مشكل في تحديد العنصر الذي أريده. واعتقد انني قد اخبرتك بأن الحل الاسهل لمشكلتك هو ان تقوم بإنشاء state مختلفة لكل عنصر وظهرت لديك مشكلة ثانية وهي انك تريد حساب عدد الاعجابات واخبرتك انه يمكنك فعل ذلك بإنشاء state مختلفة لذلك. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 6 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 6 ديسمبر 2022 بتاريخ 39 دقائق مضت قال عمر قره محمد: في سؤالك كنت تقول ان المشكلة في تحديد العنصر الذي تريده : واعتقد انني قد اخبرتك بأن الحل الاسهل لمشكلتك هو ان تقوم بإنشاء state مختلفة لكل عنصر وظهرت لديك مشكلة ثانية وهي انك تريد حساب عدد الاعجابات واخبرتك انه يمكنك فعل ذلك بإنشاء state مختلفة لذلك. شكرا لك أخي و لكن أعتقد أنك لم تفهمني. أولا: المشكلة الأولى تظهر عند النقر على زر الإعجاب. setSelectedProduct(findProd.id) قامت بتحديد العنصر الذي أنا بصدد النقر عليه. إذن المشكل في setToggleLike(!toggleLike) حيث أنها تقوم بتغيير كافة الأزرار. المشكل الآخر هو أني لا أريد تغيير state حيث أنني أحتاج الدالة handleClick قصد استعمالها كprops للمكون Header. أرجو أن أكون قد وضحت الآن و أعتذر مجددا. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
عندي مشكل في تحديد العنصر الذي أريده.
في المثال التالي عندما أضغط على زر like تتحول كافة العناصر إلى dislike وليس العنصر المحدد.
مثلما تلاحظون كافة المنتجات dislike
قمت باستعمال الدالة find و كن دون جدوى.
شكرا على المساعدة.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
6 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.