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

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

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

السؤال

في المثال التالي عند النقر العنصر المحدد لا تتغير 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

صورة الشاشة

Capture.thumb.JPG.27d78427ee3ddbe7ffc0adaa5f80937a.JPG

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

Recommended Posts

  • 0

هذا يحدث لأن المتغير 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 غير صحيح.

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...