React: useRef と DOM の操作

ボタン：Select All Text、Scroll to the bottom、Measure the height。入力：自動フォーカスの入力フィールド。useEffect が副作用を管理。useRef で DOM を参照

自動フォーカスの入力フィールド、"Select All Text" ボタン、スクロール可能な 20 行リスト（"Scroll to bottom" 付き）、"Measure the height" 付きのボックス → px 数値を表示

表示："DOM Example of Operation"。ボタン：Select All Text、Scroll to the bottom、Measure the height。入力：自動フォーカスの入力フィールド。useEffect が副作用を管理。useRef で DOM/変数を参照

現在：0、前回：（first time）。+1 をクリック → 現在：1、前回：0。クリックのたびに現在値と前の値を表示する。

状態：count（setter: setCount）。ボタン：setCount(c => c + 1)}>+1。useEffect が副作用を管理。useRef で DOM/変数を参照

"Menu ▾" ボタン → ドロップダウンメニュー（Profile、Settings、Logout）。外側をクリック → useClickOutside フックで自動的に閉じる。

スロットルボタン：連打は無視される（最大 1 秒に 1 回）。クリックカウンター + "Throttled!" のフィードバック。useRef で lastClick のタイムスタンプを保存

クリック → "Clicked!" + カウンター。1 秒以内に再クリック → "Too fast! Wait 1 second."（赤）。useRef のタイムスタンプでスロットルを実装。

表示："Click Me"。状態：clicks（setter: setClicks）、feedback（setter: setFeedback）。ボタン：Click Me。useRef で DOM/変数を参照。タイマーベースの挙動

const FancyInput = React.forwardRef(function FancyInput({ label, error, ...props }, ref) {
  const internalRef = useRef(null)

  useImperativeHandle(ref, () => ({
    focus: () => internalRef.current?.focus(),
    selectAll: () => {
      const el = internalRef.current
      if (el) { el.focus(); el.select() }
    },
    scrollIntoView: () => internalRef.current?.scrollIntoView({ behavior: 'smooth' }),
  }))

  return (
    <div style={{ marginBottom: 12 }}>
      <label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>{label}</label>
      <input
        ref={internalRef}
        style={{ width: '100%', padding: 8, borderRadius: 4, border: `1px solid ${error ? '#ff4d4f' : '#d9d9d9'}`, outline: 'none' }}
        {...props}
      />
      {error && <p style={{ color: '#ff4d4f', fontSize: 12, margin: '4px 0 0' }}>{error}</p>}
    </div>
  )
})

function FormWithFancyInput() {
  const emailRef = useRef(null)

  function handleSubmit(e) {
    e.preventDefault()
    emailRef.current?.focus()
  }

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: '0 auto' }}>
      <h3>Sign Up</h3>
      <FancyInput ref={emailRef} label="Email" type="email" placeholder="you@example.com" />
      <FancyInput label="Password" type="password" placeholder="At least 6 characters" />
      <button type="submit" style={{ padding: '8px 24px', cursor: 'pointer' }}>Submit</button>
    </form>
  )
}

登録フォーム：ラベル付きの Email と Password 入力フィールド、エラー表示のスタイル付き。送信時に email にフォーカス。focus()、selectAll()、scrollIntoView() メソッドを公開。