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

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

السؤال

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

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

Recommended Posts

عمر قره محمد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية