محمود_سعداوي نشر 4 ديسمبر 2022 أرسل تقرير مشاركة نشر 4 ديسمبر 2022 السلام عليكم. المثال التالي، عندما أقوم بالنقر على الزر like تتحول كل الأخرى إلى dislike. CartProduct.js code import React,{useState} from 'react' function CartProduct({id,price,src,title,detail,toggleLikeBtn,isLike}) { return ( <div className="card"> <div className='product-price'>{price} DT</div> <img src={src} className="card-img-top" alt="..."/> <div className="card-body"> <h5 className="card-title">{title}</h5> <p className="card-text">{detail}</p> <div className='cart-btns'> <div className='toggle-like'> <button type="button" className="btn btn-outline-danger" onClick={toggleLikeBtn}> {isLike ? "Dislike" : "Like"} </button> </div> <button type="button" className="btn btn-outline-primary">Add To Cart</button> </div> <div className='rating'> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> </div> </div> </div> ) } export default CartProduct CartProducts.js code import React,{useState} from 'react' import data from '../data' import './CartProducts.css' import CartProduct from './CartProduct' function CartProducts() { const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } return ( <div className='cart-products-container'> { data.map(product => ( <CartProduct key={product.id} id={product.id} src={product.img} price={product.price} title={product.title} detail={product.des} toggleLikeBtn={toggleLikeBtn} isLike={isLike} /> )) } </div> ) } export default CartProducts شكرا على المساعدة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 4 ديسمبر 2022 أرسل تقرير مشاركة نشر 4 ديسمبر 2022 يبدو ان المشكلة انك استخدمت state واحد من النوع isLike لكل العناصر وبالتالي كل العناصر اصبح مربوطة بالـ state نفسه. ولحل المشكلة قم بعمل state مخصص للـ isLike لكل عنصر على حدى، وذلك بنقل الاكواد : const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } إلى داخل الـ CartProducts.js كالتالي : import React,{useState} from 'react' function CartProduct({id,price,src,title,detail}) { const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } return ( <div className="card"> <div className='product-price'>{price} DT</div> <img src={src} className="card-img-top" alt="..."/> <div className="card-body"> <h5 className="card-title">{title}</h5> <p className="card-text">{detail}</p> <div className='cart-btns'> <div className='toggle-like'> <button type="button" className="btn btn-outline-danger" onClick={toggleLikeBtn}> {isLike ? "Dislike" : "Like"} </button> </div> <button type="button" className="btn btn-outline-primary">Add To Cart</button> </div> <div className='rating'> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> </div> </div> </div> ) } export default CartProduct 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 4 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 4 ديسمبر 2022 بتاريخ 2 دقائق مضت قال عمر قره محمد: يبدو ان المشكلة انك استخدمت state واحد من النوع isLike لكل العناصر وبالتالي كل العناصر اصبح مربوطة بالـ state نفسه. ولحل المشكلة قم بعمل state مخصص للـ isLike لكل عنصر على حدى، وذلك بنقل الاكواد : const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } إلى داخل الـ CartProducts.js كالتالي : import React,{useState} from 'react' function CartProduct({id,price,src,title,detail}) { const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } return ( <div className="card"> <div className='product-price'>{price} DT</div> <img src={src} className="card-img-top" alt="..."/> <div className="card-body"> <h5 className="card-title">{title}</h5> <p className="card-text">{detail}</p> <div className='cart-btns'> <div className='toggle-like'> <button type="button" className="btn btn-outline-danger" onClick={toggleLikeBtn}> {isLike ? "Dislike" : "Like"} </button> </div> <button type="button" className="btn btn-outline-primary">Add To Cart</button> </div> <div className='rating'> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> </div> </div> </div> ) } export default CartProduct نعم صحيح، المشكلة أني أحتاج إلى الدالة toggleLikeBtn قصد إضافة رقم معين عند كل عملية إعجاب gلعنصر favorites في الheader 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 4 ديسمبر 2022 أرسل تقرير مشاركة نشر 4 ديسمبر 2022 بتاريخ 2 دقائق مضت قال محمود سعداوي: نعم صحيح، المشكلة أني أحتاج إلى الدالة toggleLikeBtn قصد إضافة رقم معين عند كل عملية إعجاب gلعنصر favorites في الheader هنالك العديد من الطرق للتعامل مع هذه المشكلة ولكن بشكل بسيط يمكنك اضافة state إضافية للقيام بهذه الوظيفة وتقوم بإضافة 1 عند النقر على like و -1 عند النقر على dislike 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
المثال التالي، عندما أقوم بالنقر على الزر like تتحول كل الأخرى إلى dislike.
CartProduct.js code
CartProducts.js code
شكرا على المساعدة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.