React: Tratamento de eventos

// 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......'
})

...
Clicked the "Log In" button
Button on Mouse Hover
Mouse leaves button

Formulário de login com e-mail/senha. E-mail inválido → borda vermelha + "The email address format is incorrect.". Senha com menos de 6 caracteres → "Password must be at least 6 chars". Envio → 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 })
Clicked the "Log In" button
Button on Mouse Hover
Mouse leaves button

Foco automático no campo de entrada. Ctrl+S → "💾 Saved (Ctrl+S)", Ctrl+Z → "↩️ Undo (Ctrl+Z)", Escape → limpa, Enter → "✅ Confirm: [text]". Mostra as teclas pressionadas.

Subtítulo: "⌨️ Shortcut Keys Panel". Exibe: "⌨️ Shortcut Keys Panel". Entrada: Type here，Try the shortcut keys.... useEffect gerencia efeitos colaterais. useRef referencia o DOM/variável

4 itens arrastáveis (Apple, Banana, Cherry, Date). Arraste para reordenar; o item arrastado ganha uma borda de destaque azul.

Exibe: "Drag to Reorder". Estado: items (setter: setItems), dragIdx (setter: setDragIdx)

Hook useEventListener: adiciona/remove automaticamente listeners de eventos do DOM. Limpeza na desmontagem para evitar vazamento de memória

Estado: pos (setter: setPos). useEffect gerencia efeitos colaterais. useCallback memoiza o handler

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>
  )
}

Barra de busca + menu suspenso de categoria (All/Electronics/Books). A busca envia {query, category}. O reset limpa os dois campos.