اذهب إلى المحتوى
  • 0

معالجة مشكل تحديد زر معين عند النقر في react js

محمود_سعداوي

السؤال

السلام عليكم.

 المثال التالي، عندما أقوم بالنقر على الزر like  تتحول كل الأخرى إلى dislike.

Capture.thumb.JPG.3a79578c219de148a27d8216586afd00.JPG

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

شكرا على المساعدة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يبدو ان المشكلة انك استخدمت 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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 دقائق مضت قال محمود سعداوي:

نعم صحيح، المشكلة أني أحتاج إلى الدالة toggleLikeBtn قصد إضافة رقم معين عند كل عملية إعجاب gلعنصر favorites في الheader 

هنالك العديد من الطرق للتعامل مع هذه المشكلة ولكن بشكل بسيط يمكنك اضافة state إضافية للقيام بهذه الوظيفة وتقوم بإضافة 1 عند النقر على like و -1 عند النقر على dislike

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...