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}。リセットで両方のフィールドをクリア。