تحديد الخيار المعاكس تلقائيًا في مجموعة راديو معطلة باستخدام Ant Design

في عالم تطوير واجهات المستخدم، تُعتبر المكتبات والأدوات مثل React.js وAnt Design ميزات مهمة لتسهيل بناء تطبيقات ويب متفاعلة. اليوم، سنتناول كيفية جعل مجموعة خيارات راديو (Radio Group) تختار تلقائيًا الخيار المعاكس في مجموعة راديو ثانية معطلة في React.js باستخدام مكتبة Ant Design. هذه التقنية يمكن أن تكون مفيدة جدًا في نماذج التسجيل أو إعدادات الحسابات حيث يُحتاج لتحديد مجموعة من الخيارات المتكاملة.

تعريف الفكرة الأساسية

الفكرة هنا هي وجود مجموعتي راديو: الأولى تتعلق باختيار الجنس (ذكر أو أنثى) بينما الثانية تمثل الجنس المفضل ولكنها معطلة (أي لا يمكن للمستخدم التفاعل معها بشكل مباشر). الهدف هو أنه إذا اختار المستخدم "ذكر" في المجموعة الأولى، فإن الخيار "أنثى" في المجموعة الثانية سيُحدد تلقائيًا، والعكس صحيح.

الخطوات اللازمة لتحقيق ذلك

للبدء، سنقوم بإنشاء مكون React باستخدام ستيت (state) لتتبع الاختيار الحالي في مجموعة راديو الجنس. سنستخدم أيضًا التعامل مع أحداث تغير القيمة لتحديث الحالة تلقائيًا. إليك مقطع الكود الأساسي الذي يوضح هذه العملية:

import React, { useState } from 'react';
import { Form, Radio } from 'antd';
const MyComponent = () => {
  const [form] = Form.useForm();
  const [gender, setGender] = useState(true); // true = ذكر، false = أنثى
  const handleGenderChange = (e: React.ChangeEvent) => {
    setGender(e.target.value); // تحديث الجنس بناءً على الاختيار
  };
  return (
    <Form form={form}>
      {/* اختيار الجنس */}
      <Form.Item label="الجنس">
        <Radio.Group onChange={handleGenderChange} value={gender}>
          <Radio value={true}>ذكر</Radio>
          <Radio value={false}>أنثى</Radio>
        </Radio.Group>
      </Form.Item>
      {/* الجنس المفضل (معطل) */}
      <Form.Item label="الجنس المفضل">
        <Radio.Group value={!gender} disabled>
          <Radio value={true}>ذكر</Radio>
          <Radio value={false}>أنثى</Radio>
        </Radio.Group>
      </Form.Item>
      {/* زر الإرسال */}
      <Form.Item>
        <button type="submit">إرسال</button>
      </Form.Item>
    </Form>
  );
};
export default MyComponent;

شرحية الكود

الكود أعلاه يتضمن مجموعة من العناصر الأساسية. نبدأ باستيراد المكونات اللازمة من مكتبة Ant Design، ومنها Form وRadio. يتم إنشاء الحالة gender لتحديد القيمة الحالية لجنس المستخدم. عند اختيار جنس معين، يتم تحديث هذه القيمة باستخدام دالة handleGenderChange.

في مجموعة الخيارات المعطلة (الجنس المفضل)، يتم ضبط القيمة المعاكس تلقائيًا بناءً على ما تم اختياره في المجموعة الأولى، عن طريق استخدام علامة ! (نفي الحقل).

فوائد استخدام Ant Design مع React.js

استخدام مكتبة Ant Design يجعل من السهل تصميم واجهات مستخدم جذابة ومتجاوبة. كما أن React.js توفر هيكلية قوية تتيح لك التحكم بالحالة الديناميكية. بدمج هذين العنصرين، يستطيع المطورون إنشاء واجهات تفاعلية مريحة توفر تجربة مستخدم سلسة.

ختاماً

تحقيق وظيفة تحديد الخيار المعاكس تلقائيًا في مجموعات الراديو المعطلة يُعتبر حلاً برمجيًا فعالًا للمشكلات المرتبطة بتصميم النماذج. هذا الأمر لا يساعد فقط على تحسين تجربة المستخدم ولكن يعزز أيضًا من سهولة استخدام التطبيق. لمزيد من المعلومات حول هذه التقنية وكيفية تكاملها مع مكونات أخرى، يُمكنك استكشاف المزيد من المراجع والموارد.

بهذا نكون قد ألقينا نظرة شاملة على كيفية جعل Radio.Group الثانية تختار تلقائيًا الخيار المعاكس لخيار المجموعة الأولى في React.js باستخدام Ant Design. هذا الأسلوب ليس فقط فعالًا بل يعكس كيفية استخدام المكتبات بشكل ذكي في تطبيقات الويب الحديثة.