Help us understand the problem. What is going on with this article?

React Hooksでインスタンスメソッドを実装する

コンポーネントの特定の動作を外部から呼び出すための方法です。関数コンポーネントでも実装できました。もはやクラスではないのでインスタンスメソッドと呼ぶのは正確ではないかもしれませんが…。

propsの値変更で多くのことは実現できるので出番は限られてくると思いますが、入力フィールドにフォーカスする、CSSアニメーションを再生するといった場合には有効だと思います。クラスを使わずに実装する際の備忘録としてまとめました。

メソッドの実装(子コンポーネント)

useImperativeHandleフックとforwardRefを組み合わせて実装します。この例の場合、インスタンス.doSomething()が呼ばれたタイミングでログが出力されます。

import React, { useImperativeHandle, forwardRef } from 'react';

function MyComponent(props, ref) {
  useImperativeHandle(ref, () => ({
    doSomething: () => {
      console.log('Do something');
    }
  }));
  return <div>My Component</div>;
}

export default forwardRef(MyComponent);

メソッドの呼び出し(親コンポーネント)

useRefフックとref属性によって子コンポーネントのインスタンスが参照できるようになります。ref.current.メソッド()で先程のメソッドを呼び出します。

import React, { useRef } from 'react';
import MyComponent from './MyComponent';

export default function App() {
  const myComponent = useRef(null);
  return (
    <div>
      <MyComponent ref={myComponent} />
      <button onClick={() => myComponent.current.doSomething()}>
        Click
      </button>
    </div>
  );
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away