Event Types توصيف أنواع الأحداث

آخر تحديث: 2026-11-03

Event Types توصيف أنواع الأحداث

تأتي أنواع الأحداث من @types/react: يُنمَّط onClick كـ MouseEvent<HTMLButtonElement> وonChange كـ ChangeEvent<HTMLInputElement>. بمجرد توصيفها يقدّم currentTarget تلميحات دقيقة عن العنصر لا عنصرًا عامًا. وتوصيف معالج سطري اختياري لأن سمة JSX توفّر النوع لك. وللمعالج الذي تفصله بدالة مستقلة اكتب التوصيف يدويًا فيبقى المحرّر يفحصه.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

function SearchBox() {
  const [kw, setKw] = useState('')

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setKw(e.currentTarget.value)   // currentTarget is inferred as HTMLInputElement
  }
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
  }
  return (
    <form onSubmit={onSubmit}>
      <input value={kw} onChange={onChange} />
    </form>
  )
}
// The inline form needs no annotation: onChange={e => setKw(e.target.value)} - e is inferred

القيمة المرجعة：لا قيمة مرجعة؛ إنها نمط برمجي وليست واجهة قابلة للاستدعاء.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

الكتابة تسجّل ChangeEvent<HTMLInputElement> والنقر يسجّل MouseEvent<HTMLButtonElement>، مع آخر أربع مدخلات أدناه — هذه أحداث عادية وقت التشغيل، وتوصيفات TypeScript في كتلة syntax.

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

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

من نحن