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

محمود_سعداوي · 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

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

عمر قره محمد · 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

محمود_سعداوي · 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

عمر قره محمد · 4 ديسمبر 2022

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

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

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

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

السؤال

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية