• 0

عنصر checkbox لا يعمل بعد وضع قيمة إفتراضية له في React

عندما أقوم بعمل عنصر input من نوع checkbox في مكون React ووضع قيمة إفتراضية له كالتالي لا يمكنني أن أقوم بتغير هذه القيمة من خلال الضغط على العنصر:

<input type="checkbox" checked="checked" />

حاولت أن أستخدم التابع createElement كما في الكود التالي لكن لم ينجح الأمر أيضًا:

React.createElement('input', {
        type: 'checkbox',
        checked: 'checked'
    }, 'Check here');

 

انشر على الشّبكات الاجتماعية


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

في react الأمر ليس ببساطة فأنت تحتاج لتحويل ال input الى حالة ال controlled بربطه ب state يعني استخدام شيفرة من هذا القبيل

import React from 'react';

export default function test() {
  const [checked, setChecked] = useState(true);//حالة لتحديد وضعية الضغط
  
  const handleChange = (e) => {
    setChecked(!e.target.checked);//تغيير القيمة المنطقية
  };
  return (
    <div>
      <input onChange={handleChange} type="checkbox" checked={checked} />
    </div>
  );
}

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

مرحباً @Adam Ebrahim 

السبب بسيط وهو إنك تقوم بإسناد الخاصية 

checked

بشكل مباشر في 

React.createElement

عند فعل ذلك لن تتمكن من تغيير القيمة بالتأكيد لأن العنصر الحالي هو checked لكن يجب أن تستخدم قيمة إفتراضية ولفعل ذلك نقوم بإضافة الخاصية  

defaultChecked

وإسناد القيمة true إليها الكود النهائي يصبح هكذا 
 

React.createElement('input',{type: 'checkbox', defaultChecked: true});

وأخيراً قم بإزالة 

<input type="checkbox" checked="checked" />

لأننا نقوم بعمل العنصر (الinput) من خلال الميثود createElement 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

فهمت عليك أنت تريد للـcheckbox أن يكون افتراضياً checked مع قابلية تغييره، في الغالب أنت تستعمل بالفعل useState أو this.state ولكن لسبب ما تظن أنهما لن يعملا ولكن الحقيقة هي أنهما سيعملان لسبب بسيط جداً: إن تابع useState يقبل معامل هو القيمة اﻻفتراضية لمتحول الحالة.

إذاً في حالتك كل ما عليك استعماله هو useState(true) أي نمرر true كقيمة افتراضية لتابع useState.

وحتى لو كنت تستعمل class component فعندها تضع القيمة اﻻفتراضية في constructor أي 

constructor(){
  this.state = {
    checked: true
  }
}

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن