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

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

Adam Ebrahim

السؤال

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

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

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

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

 

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

Recommended Posts

  • 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>
  );
}

 

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

  • 0

مرحباً @Adam Ebrahim 

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

checked

بشكل مباشر في 

React.createElement

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

defaultChecked

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

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

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

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

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

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

  • 0

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

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

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

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

 

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...