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

Mohamed Lamin Mahmoudi · 12 مارس 2023

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 لاتتغير قيمته الابتدائية في المرة الاولى وسيتغير بعد أن أضغط على عنصر اخر لماذا ؟

عمر قره محمد · 12 مارس 2023

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

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

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

Mohamed Lamin Mahmoudi · 12 مارس 2023

بتاريخ 1 دقيقة مضت قال عمر قره محمد:
جرب تعديل الكود للشكل التالي :
const handelColor=(colorr)=>{  
  setDatacolor(colorr)  
  document.documentElement.style.setProperty('--main-color',colorr)
}
بحيث يتم استخدام الـ colorr بدلاً من الـ color في اعطاء اللون.

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

أحمد رضا5 · 12 مارس 2023

بتاريخ 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.

Mustafa Suleiman · 12 مارس 2023

لتغيير الحالة الابتدائية للون، يمكنك إعطاء قيمة ابتدائية مختلفة للمتغير 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 لتحديث اللون عندما يتم تغييره في القائمة.

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

السؤال

Mohamed Lamin Mahmoudi

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

Recommended Posts

عمر قره محمد

Mohamed Lamin Mahmoudi

أحمد رضا5

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية