レンダリング後に React で入力フィールドにフォーカスを当てるにはどうすればよいですか?

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

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

1 つのアプローチは、ドキュメントで提案されているように refs を利用することです。 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 (
    <input ref={nameInputRef} name="..." />
  );
};

export default MyComponent;

Autofocus Option

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

return (
  <input autoFocus name="..." />
);

JSX の場合とは異なり、プロパティは autoFocus (大文字の F) であることに注意してください。インセンシティブな HTML 属性。

以上がレンダリング後に React で入力フィールドにフォーカスを当てるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。