تغيير الخاصية className في react js

محمود_سعداوي · 20 نوفمبر 2022

في المثال التالي عند النقر العنصر المحدد لا تتغير className

الكود

import React,{} from 'react'

function Note({title,noteClicked,active}) {
    
  return (
    <h2 className={`note ${active && "active"} `} onClick={noteClicked}>
        {title}
    </h2>
  )
}

export default Note

بالرغم أن كل شيء تمام في console

Notes.js

function Notes({notes}) {
  const noteClicked = (e) => {
    console.log('====================================');
    console.log(e.currentTarget.classList);
    console.log('====================================');
  }
  return (
    <div className='notes'>
      {  
        notes?.map(note => <Note 
          key={note.id} 
          title={note.title} 
          content={note.content}
          noteClicked={noteClicked}
          />
        )  
      }
      <button className='add-btn'>+</button>
    </div>
  )
}

export default Notes

صورة الشاشة

عمر قره محمد · 20 نوفمبر 2022

هذا يحدث لأن المتغير active في الكود :

<h2 className={`note ${active && "active"} `} onClick={noteClicked}>
	{title}
</h2>

حيث ان الكود :

active && "active"
// غير معرف active يصبح كالتالي لأم الـ 
undefined && "active"

لحل المشكلة قم بوضع الوظيفة noteClicked داخل الملف الخاص بالمكون Note ونضيف كذلك الـ state المسماة active كالتالي :

import React, { useState } from "react";

function Note({ title }) {
      const [active, setActive] = useState();
      const noteClicked = () => {
            setActive(true);
      };
      return (
            <h2 className={`note ${active ? "active" : ""} `} onClick={noteClicked}>
                  {title}
            </h2>
      );
}

export default Note;

وكذلك يفضل ان نغير الـ "active && "active إلى الشكل :

active ? "active" : ""

والذي يعني إذا كان active صحيحاً قم بإعادة "active" وإلا قم بإعادة "" (نص فارغ).

وذلك لأن الشكل "active && "active يعيد كلاس بالشكل "note false" بينما الشكل الثاني يعيد "note " عندما يكون المتغير active غير صحيح.

تغيير الخاصية className في react js

السؤال

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

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

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

1 جواب على هذا السؤال

Recommended Posts

عمر قره محمد

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية