شرح صفوف ومحتوى الفقرة
يحتاج كل حقل نموذج متاح لذوي الإعاقة إلى عنصر <label> مرتبط عبر خاصية htmlFor بمعرّف الحقل id. غير أن كتابة معرّف ثابت مثل id="email" داخل مكون قابل لإعادة الاستخدام يفسد الصفحة فور عرض نسختين من المكون في نفس الشاشة.
يوفر خطاف useId() المدمج حلاً قياسياً بتوليد معرّف فريد لكل نسخة مكون دون أي تصادم، ويمكنك إلحاق لواحق وصفية به مثل `${id}-email` عند وجود عدة حقول.
HTML
function EmailField({ heading }) {
const inputId = useId();
const [email, setEmail] = useState('');
return (
<div>
<label htmlFor={inputId}>{heading}</label>
<input id={inputId} value={email}
onChange={(e) => setEmail(e.target.value)} />
</div>
);
}