Mohamed Lamin Mahmoudi نشر 12 مارس 2023 أرسل تقرير مشاركة نشر 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 لاتتغير قيمته الابتدائية في المرة الاولى وسيتغير بعد أن أضغط على عنصر اخر لماذا ؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 12 مارس 2023 أرسل تقرير مشاركة نشر 12 مارس 2023 جرب تعديل الكود للشكل التالي : const handelColor=(colorr)=>{ setDatacolor(colorr) document.documentElement.style.setProperty('--main-color',colorr) } بحيث يتم استخدام الـ colorr بدلاً من الـ color في اعطاء اللون. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohamed Lamin Mahmoudi نشر 12 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 12 مارس 2023 بتاريخ 1 دقيقة مضت قال عمر قره محمد: جرب تعديل الكود للشكل التالي : const handelColor=(colorr)=>{ setDatacolor(colorr) document.documentElement.style.setProperty('--main-color',colorr) } بحيث يتم استخدام الـ colorr بدلاً من الـ color في اعطاء اللون. نعم يتغير اللون لكن لماذا يتأخر تغيير اللون باستعمال useState? 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 أحمد رضا5 نشر 12 مارس 2023 أرسل تقرير مشاركة نشر 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. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 12 مارس 2023 أرسل تقرير مشاركة نشر 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 لتحديث اللون عندما يتم تغييره في القائمة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mohamed Lamin Mahmoudi
عندما اضغط على عنصر من عناصر ul فإن اللون color لاتتغير قيمته الابتدائية في المرة الاولى وسيتغير بعد أن أضغط على عنصر اخر لماذا ؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.