محمود سعداوي2 نشر 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 اقتباس
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 اقتباس
0 محمود سعداوي2 نشر 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 اقتباس
0 عمر قره محمد نشر 4 ديسمبر 2022 أرسل تقرير نشر 4 ديسمبر 2022 بتاريخ 2 دقائق مضت قال محمود سعداوي: نعم صحيح، المشكلة أني أحتاج إلى الدالة toggleLikeBtn قصد إضافة رقم معين عند كل عملية إعجاب gلعنصر favorites في الheader هنالك العديد من الطرق للتعامل مع هذه المشكلة ولكن بشكل بسيط يمكنك اضافة state إضافية للقيام بهذه الوظيفة وتقوم بإضافة 1 عند النقر على like و -1 عند النقر على dislike 1 اقتباس
السؤال
محمود سعداوي2
السلام عليكم.
المثال التالي، عندما أقوم بالنقر على الزر like تتحول كل الأخرى إلى dislike.
CartProduct.js code
CartProducts.js code
شكرا على المساعدة
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.