【React】useImperativeHandle の使い方｜forwardRef と組み合わせて子の機能を親に公開する

import { forwardRef, useImperativeHandle, useRef } from "react";

// 親に公開するメソッドの型
export type FancyInputHandle = {
  focus: () => void;
  clear: () => void;
};

// forwardRef で ref を受け取れるようにする
const FancyInput = forwardRef<FancyInputHandle>((props, ref) => {
  // 実際の input を指す内部用の ref
  const inputRef = useRef<HTMLInputElement>(null);

  // ref.current に入る中身を組み立てる
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    clear: () => {
      if (inputRef.current) inputRef.current.value = "";
    },
  }));

  return <input ref={inputRef} type="text" />;
});

export default FancyInput;

import { useRef } from "react";
import FancyInput, { type FancyInputHandle } from "./FancyInput";

export default function Parent() {
  // 公開された { focus, clear } を持つ ref
  const inputRef = useRef<FancyInputHandle>(null);

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>
        フォーカスする
      </button>
      <button onClick={() => inputRef.current?.clear()}>
        クリアする
      </button>
    </div>
  );
}

import { forwardRef, useImperativeHandle, useState } from "react";

export type CounterHandle = {
  getCount: () => number;
};

const Counter = forwardRef<CounterHandle>((props, ref) => {
  const [count, setCount] = useState(0);

  // count が変わったときだけ公開オブジェクトを作り直す
  useImperativeHandle(
    ref,
    () => ({
      getCount: () => count,
    }),
    [count],
  );

  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
});

export default Counter;

import { forwardRef, useImperativeHandle, useRef, useState } from "react";

export type EmailFieldHandle = {
  // 検証に成功したら true を返す
  validate: () => boolean;
  focus: () => void;
};

const EmailField = forwardRef<EmailFieldHandle>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [error, setError] = useState("");

  useImperativeHandle(ref, () => ({
    validate: () => {
      const value = inputRef.current?.value ?? "";
      const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
      setError(ok ? "" : "メールアドレスの形式が正しくありません");
      return ok;
    },
    focus: () => inputRef.current?.focus(),
  }));

  return (
    <div>
      <input ref={inputRef} type="email" placeholder="mail@example.com" />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
});

export default EmailField;

import { useRef, type FormEvent } from "react";
import EmailField, { type EmailFieldHandle } from "./EmailField";

export default function SignupForm() {
  const emailRef = useRef<EmailFieldHandle>(null);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    const ok = emailRef.current?.validate();
    if (!ok) {
      emailRef.current?.focus(); // 失敗したら入力欄に戻す
      return;
    }
    // 検証に通ったときだけ送信処理へ進む
    console.log("送信します");
  };

  return (
    <form onSubmit={handleSubmit}>
      <EmailField ref={emailRef} />
      <button type="submit">登録</button>
    </form>
  );
}

import { useImperativeHandle, useRef, type Ref } from "react";

export type FancyInputHandle = {
  focus: () => void;
};

// ref を普通の props として受け取れる（React 19 以降）
function FancyInput({ ref }: { ref: Ref<FancyInputHandle> }) {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
  }));

  return <input ref={inputRef} type="text" />;
}

export default FancyInput;