React レンダリング後の入力フィールドにフォーカスする

React では、レンダリング後に入力フィールドにフォーカスを設定することは、さまざまな方法で実現できます。 .

1 つのアプローチは、ドキュメントで提案されているように ref を利用することです。 render 関数内の入力フィールド (例: "nameInput") に ref を割り当てることで、その DOM ノードにアクセスし、手動で focus メソッドを呼び出すことができます。ただし、この関数をいつどこで呼び出すかを理解することが重要です。

フォーカス関数の呼び出し

フォーカス関数を呼び出す最も簡単な場所は、コンポーネントのコンポーネント DidMount ライフサイクル メソッドです。 。これにより、コンポーネントが DOM にマウントされた後にフォーカスが設定されるようになります。コードは次のようになります。

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus();
    }
  }, []);

  return (
    
  );
};

export default MyComponent;

Autofocus Option

あるいは、React が提供する autoFocus prop を利用することもできます。入力フィールドでこのプロパティを true に設定すると、コンポーネントはマウント時に自動的にフォーカスを取得します。

return (
  
);

大文字と小文字を区別しない HTML 属性とは異なり、JSX ではプロパティは autoFocus (大文字の F) であることに注意してください。