Reactでレンダリングした後に要素にフォーカスを設定する方法

概要

要素にフォーカスを設定することで、ユーザーを次に予想される入力フィールドに穏やかに誘導し、当て推量を減らしてより良いブラウジング エクスペリエンスを提供します。

この記事では、React アプリケーションまたは React コンポーネントをレンダリングした後に要素にフォーカスを設定する方法を学びます。

従来の HTML では、フォーカスする要素を設定するのは簡単でした。 autofocus 私たちの属性 これはブール属性であり、デフォルトで false. ブラウザーにその特定の入力フィールドにフォーカスするように指示し、ユーザーはすぐに値の入力を開始できます。

<form>
    <input type="text" autofocus> // Will focus
    <input type="text"> // Won't focus
</form>

これは React アプリケーションでも機能します。 それでも、よりプログラム的な制御でレンダリング後に要素にフォーカスを設定したい場合は、 useEffect() 機能コンポーネントのフックと componentDidMount() クラス コンポーネントのライフサイクル メソッド。

機能コンポーネントでレンダリング後に要素にフォーカスを設定する方法

以前は、React フックが導入される前は、Functional コンポーネントでこのような操作を処理できませんでした。

フックの導入以来、アプリケーション/コンポーネントが完全にレンダリングされたことを知ることができるため、 useEffect() 針。 また、 useRef() 特定の要素を直接参照するために使用できるフック。

XNUMX つのフィールドを持つフォームがあり、コンポーネントのレンダリング後にフィールドの XNUMX つにフォーカスを設定するとします。

const App = () => {
    return (
        <div className='container'>
            <form>
                <input type="text" placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

を使用して入力への参照を取得することから始めましょう useRef() 反応フック。 これを行うには、まずインポートします useRef() React から、 ref デフォルトでその値をnullに設定してから、作成した ref を介してReact要素に ref 属性：

import { useRef } from 'react';

const App = () => {
    const inputReference = useRef(null);

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

注： 作成した参照を、フォーカスを設定したい入力要素の XNUMX つにのみアタッチしたことに注意してください。

では、 useEffect() アプリケーションをレンダリングした後に要素にフォーカスを追加するためのフック:

import { useRef, useEffect } from 'react'

const App = () => {
    const inputReference = useRef(null);

    useEffect(() => {
        
    }, [])

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

上記のコードでは、 useEffect() フックしてから、空の依存関係配列でフックを使用しました ([]) コンポーネントが最初にマウントされたときにのみ起動するようにします。 最後に、参照された要素をフォーカスするために、 current 属性を付けてから、 focus() 方法：

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

この時点で、アプリケーションまたはコンポーネントがレンダリングされると、参照された要素が自動的にフォーカスされます。

import { useRef, useEffect } from 'react';

const App = () => {
    const inputReference = useRef(null);

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

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

クラス コンポーネントでのレンダリング後に要素にフォーカスを設定する方法

これまで、機能コンポーネントを使用して要素にフォーカスを設定する方法を見てきましたが、フックは機能コンポーネントでのみ機能するため、フックを使用しなくなったため、クラス コンポーネントではまったく異なる構文になります。 クラス コンポーネントでは、ref を constructor() メソッドとを利用する componentDidMount() アプリケーションがレンダリングされたら、参照された要素をフォーカスするように設定するメソッド:

import React, { Component } from 'react';

export class App extends Component {
    constructor(props) {
        super(props);
        this.inputReference = React.createRef();
    }

    componentDidMount() {
        this.inputReference.current.focus();
    }

    render() {
        return (
            <div className='container'>
                <form>
                    <input type="text" ref={this.inputReference} placeholder='This has focus' />
                    <input type="text" placeholder='No focus when we render' />
                </form>
            </div>
        )
    }
}
export default App;

上記のコードでは、 constructor() 入力要素に添付した参照を作成するメソッド:

constructor(props) {
    super(props);
    this.inputReference = React.createRef();
}

次に、 componentDidMount() ライフサイクル メソッドは、 useEffect() フックを使用して、アプリケーション/コンポーネントがレンダリングされたときに要素がフォーカスされていることを確認します。

componentDidMount() {
    this.inputReference.current.focus();
}

まとめ

この記事では、アプリケーションまたはコンポーネントが Class コンポーネントと Functional コンポーネントの両方でレンダリングされたら、入力フィールドを使用してフォーカスする要素を設定する方法を学びました。 どちらのメソッドも同じですが、XNUMX つの異なるタイプのコンポーネントであるため、構文が異なります。