شرح صفوف ومحتوى الفقرة
تمثل أزرار الانتقاء (Radio Buttons) اختياراً حصرياً واحداً يلغي تلقائياً بقية الخيارات، مثل اختيار دورة الاشتراك الشهري أو السنوي. نخزن الخيار المختار كسلسلة نصية واحدة في الحالة.
امنح جميع الأزرار في المجموعة نفس خاصية name لدعم التنقل بأسهم لوحة المفاتيح، وحدد لكل زر قيمته الخاصة مع فحص التطابق checked={cycle === optionValue} وتحديث الحالة عند التغيير.
HTML
function BillingSelector() {
const [plan, setPlan] = useState('monthly');
return (
<label>
<input type="radio" name="plan" value="monthly"
checked={plan === 'monthly'}
onChange={(e) => setPlan(e.target.value)} />
Monthly
</label>
);
}