React: معالجة الأحداث

// Native JS：Various compatibility issues and details need to be handled manually

// 1. Get DOM Element
const form = document.getElementById('register-form')
const nameInput = document.getElementById('name')
const submitBtn = document.getElementById('submit-btn')

// 2. Event Binding
form.addEventListener('submit', function(event) {
  event.preventDefault()  // Prevent the page from refreshing
  
  // 3. Manually Retrieving Form Data
  const formData = new FormData(form)
  const data = Object.fromEntries(formData)
  
  // 4. Submit Data
  fetch('/api/register', {
    method: 'POST',
    body: JSON.stringify(data)
  })
})

// 5. Real-Time Input Validation
nameInput.addEventListener('input', function(event) {
  if (event.target.value.length < 2) {
    showError('Name (at least) 2 characters')
  } else {
    hideError()
  }
})

// 6. Prevent duplicate submissions when the Submit button is clicked
let isSubmitting = false
submitBtn.addEventListener('click', function() {
  if (isSubmitting) return
  isSubmitting = true
  submitBtn.disabled = true
  submitBtn.textContent = 'Submitting......'
})

...
تم النقر على زر "Log In"
تم تمرير مؤشر الفأرة فوق الزر
غادر المؤشر الزر

نموذج تسجيل دخول بالبريد الإلكتروني/كلمة المرور. بريد غير صالح → إطار أحمر + "The email address format is incorrect.". كلمة مرور أقل من 6 محارف → "Password must be at least 6 chars". الإرسال → console.log({email, password})

function UserList({ users, onDelete }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          {/* Arrow Functions：Incoming user.id As an additional parameter */}
          <button onClick={() => onDelete(user.id)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  )
}

// Usage
<UserList
  users={users}
  onDelete={(id) => console.log('Delete User：', id)}
/>

function ColorPicker({ colors, onSelect }) {
  return (
    <div>
      <p>Select a Color：</p>
      {colors.map(color => (
        <button
          key={color}
          onClick={(event) => {
            // event：Native Synthesis Event Object
            // color：Custom Parameters
            onSelect(color)
            console.log('Click here：', event.clientX, event.clientY)
          }}
          style={{
            backgroundColor: color,
            width: '40px',
            height: '40px',
            border: '2px solid #ddd',
            borderRadius: '50%',
            margin: '4px',
            cursor: 'pointer'
          }}
        />
      ))}
    </div>
  )
}

... ('Log In：', { email, password })
تم النقر على زر "Log In"
تم تمرير مؤشر الفأرة فوق الزر
غادر المؤشر الزر

تركيز تلقائي على حقل الإدخال. Ctrl+S → "💾 Saved (Ctrl+S)"، Ctrl+Z → "↩️ Undo (Ctrl+Z)"، Escape → تفريغ، Enter → "✅ Confirm: [text]". يعرض المفاتيح التي ضُغطت.

العنوان الفرعي: "⌨️ Shortcut Keys Panel". يعرض: "⌨️ Shortcut Keys Panel". الإدخال: Type here، Try the shortcut keys.... . يتولى useEffect إدارة الآثار الجانبية. يشير useRef إلى DOM/متغير

4 عناصر قابلة للسحب (Apple، Banana، Cherry، Date). السحب لإعادة الترتيب؛ العنصر المسحوب يظهر بإطار مُبرَز بالأزرق.

يعرض: "Drag to Reorder". الحالة: items (setter: setItems)، dragIdx (setter: setDragIdx)

خطاف useEventListener: يضيف/يزيل مستمعي أحداث DOM تلقائيًا. التنظيف عند التفكيك يمنع تسرب الذاكرة

الحالة: pos (setter: setPos). يتولى useEffect إدارة الآثار الجانبية. يُخزن useCallback مرجع دالة المعالجة

function SearchForm({ onSearch }) {
  const [query, setQuery] = useState('')
  const [category, setCategory] = useState('all')

  function handleSubmit(e) {
    e.preventDefault()
    onSearch({ query, category })
  }

  function handleReset() {
    setQuery('')
    setCategory('all')
  }

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: '0 auto' }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <input value={query} onChange={e => setQuery(e.target.value)}
          placeholder="Search..." style={{ flex: 1, padding: 8, borderRadius: 4 }} />
        <select value={category} onChange={e => setCategory(e.target.value)}
          style={{ padding: 8, borderRadius: 4 }}>
          <option value="all">All</option>
          <option value="electronics">Electronics</option>
          <option value="books">Books</option>
        </select>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button type="submit" style={{ padding: '6px 16px', cursor: 'pointer' }}>Search</button>
        <button type="button" onClick={handleReset} style={{ padding: '6px 16px', cursor: 'pointer' }}>Reset</button>
      </div>
    </form>
  )
}

شريط بحث + قائمة منسدلة للتصنيفات (All/Electronics/Books). البحث يُرسل {query, category}. إعادة الضبط تفرغ الحقلين.