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

كيف أغير الحالة الابتدائية للون عندي بطريقة صحيحة ؟

Mohamed Lamin Mahmoudi

السؤال

const [color,setDatacolor]=useState('darkorange');
 /* useEffect(() => {
    const intervalId = setInterval(() => {
      setIndex((index) => (index + 1) % imagesArray.length);
    }, 10000);
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    setImg(imagesArray[index]);
  }, [index]);*/
  const handelColor=(colorr)=>{
    setDatacolor(colorr)
       document.documentElement.style.setProperty('--main-color',color)
  }
  return (
    
    <div  className='landing-page'>
      <div className={`settig-box ${isOpen ? "open": ""}`}>
        <div className='toggle-setting'>
        <i className={`fa fa-gear ${isOpen ? "fa-spin":""}`} onClick={()=>{setIsopen(!isOpen)}} ></i>
        </div>
        <div className='setting-container'>
          <div className='option-box'>
             <h4>Colors</h4>
             <ul className='colors-list'>
              <li onClick={()=>handelColor('darkorange')} className='active' ></li>
              <li onClick={()=>handelColor('blue')} ></li>
              <li onClick={()=>handelColor('black')} ></li>
              <li onClick={()=>handelColor('white')} ></li>
              <li onClick={()=>handelColor('red')} ></li>
             </ul>
          

عندما اضغط على عنصر من عناصر ul فإن اللون color لاتتغير قيمته الابتدائية  في المرة الاولى وسيتغير بعد أن أضغط على عنصر اخر  لماذا ؟

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

Recommended Posts

  • 0

جرب تعديل الكود للشكل التالي :

const handelColor=(colorr)=>{  
  setDatacolor(colorr)  
  document.documentElement.style.setProperty('--main-color',colorr)
}

بحيث يتم استخدام الـ colorr بدلاً من الـ color في اعطاء اللون.

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

  • 0
بتاريخ 1 دقيقة مضت قال عمر قره محمد:

جرب تعديل الكود للشكل التالي :

const handelColor=(colorr)=>{  
  setDatacolor(colorr)  
  document.documentElement.style.setProperty('--main-color',colorr)
}

بحيث يتم استخدام الـ colorr بدلاً من الـ color في اعطاء اللون.

نعم يتغير اللون لكن لماذا يتأخر تغيير اللون باستعمال useState?

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

  • 0
بتاريخ 5 ساعة قال Mohamed Lamin Mahmoudi:

نعم يتغير اللون لكن لماذا يتأخر تغيير اللون باستعمال useState?

هذا السلوك الذي تلاحظه قد يكون بسبب تأخر تحديث القيمة الجديدة لـ color في state setDatacolor(colorr) وعدم تحديث اللون على الفور. عندما تقوم بتحديد اللون الجديد handelColor، يتم تحديث color في state بقيمة جديدة ، ولكن القيمة الجديدة لـ color لا يتم استخدامها في اللحظة الحالية، ويتم استخدام القيمة القديمة لـ color لتعيين قيمة الخاصية --main-color في الدالة document.documentElement.style.setProperty. ولذلك يتم تطبيق التغيير الجديد في اللون فقط عندما تحدث تغييرات أخرى في اللون في state.

لتجاوز هذا السلوك، يمكنك استخدام القيمة الجديدة المحدثة لـ color بدلاً من استخدام قيمة color القديمة على الفور عند تحديد اللون الجديد handelColor. يمكنك القيام بذلك عن طريق تمرير القيمة الجديدة colorr مباشرةً إلى دالة تعيين الخاصية setProperty، كما يلي:

const handelColor=(colorr)=>{
  setDatacolor(colorr)
  document.documentElement.style.setProperty('--main-color',colorr)
}

بهذه الطريقة، يتم استخدام القيمة الجديدة المحدثة لـ color على الفور في تعيين الخاصية setProperty، بدلاً من استخدام القيمة القديمة لـ color.

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

  • 0

لتغيير الحالة الابتدائية للون، يمكنك إعطاء قيمة ابتدائية مختلفة للمتغير color عند تعريفه باستخدام الدالة useState. يمكنك أيضًا استخدام دالة useEffect لتحديث الحالة الابتدائية للون عندما يتم تغييره في القائمة.

في الكود الخاص بك، يتم تحديد اللون الابتدائي للصفحة بواسطة الخاصية --main-color في CSS. لذلك، بدلاً من تغيير قيمة المتغير color فقط، يجب عليك أيضًا تغيير قيمة الخاصية --main-color في CSS.

في الحالة الحالية، يتم تحديد قيمة الخاصية --main-color باستخدام المتغير color في الدالة handelColor. لتحديث قيمة الخاصية --main-color، يمكنك استخدام الكود التالي داخل الدالة handelColor:

document.documentElement.style.setProperty('--main-color', colorr);

يتم استخدام دالة setProperty لتحديث قيمة الخاصية --main-color إلى القيمة المحددة بواسطة المتغير colorr.

بالنسبة لأفضل طريقة لتغيير الحالة الابتدائية للون، يمكنك تعريف قيمة ابتدائية للمتغير color عند تعريفه باستخدام useState. على سبيل المثال، يمكنك تحديد اللون الابتدائي للصفحة على النحو التالي:

const [color, setDataColor] = useState('darkorange');

بهذه الطريقة، سيتم تعيين اللون الابتدائي إلى 'darkorange' عند تحميل الصفحة. يمكنك استخدام نفس الدالة handelColor لتحديث اللون عندما يتم تغييره في القائمة.

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...