【React+TypeScript】React Hooks useImperativeHandleのサンプル

TypeScriptでのuseImperativeHandleの使い方のサンプル。

親のコンポーネントから、子で定義したメソッドを呼び出す場合に使用します。

FancyInput.tsx

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

// 公開したいメソッドの定義
interface Handler {
  setFocus(): void;
}

// 公開したいメソッドを持つコンポーネントの定義
// プロパティを追加する場合は、forwardRef<Handler, Props>と定義する。
const FancyInput = forwardRef<Handler>((props, ref) => {
  const inputRef = useRef({} as HTMLInputElement);

  useImperativeHandle(ref, () => {
    return {
      setFocus() {
        inputRef.current.focus();
      }
    };
  });

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

// コンポーネントの使い方
const App = () => {
  const ref = useRef({} as Handler);
  return (
    <>
      <FancyInput ref={ref} />
      <button
        onClick={() => {
          ref.current.setFocus();
        }}
      >
        click
      </button>
    </>
  );
};