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

في 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>
  );
}

مرحباً @Adam Ebrahim 

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

checked

بشكل مباشر في 

React.createElement

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

defaultChecked

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

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

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

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

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

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

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

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

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