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

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

最初のレンダリング後に要素を操作することは、フロントエンド開発では一般的なニーズです。 React では、入力フィールドでこれを実現するには、シームレスなユーザー インタラクションを確保するためにフォーカスを設定する必要があります。

ドキュメントで言及されているアプローチの 1 つは、refs を使用することです。これには、ref="nameInput" などの、render 関数内の入力フィールドに ref 属性を割り当てることが含まれます。入力に焦点を当てるには、this.refs.nameInput.getInputDOMNode().focus(); を呼び出します。ただし、常に期待どおりに動作するとは限りません。

たとえば、 this.refs.nameInput.getInputDOMNode().focus(); を呼び出してみたかもしれません。 ComponentDidMount() ライフサイクル メソッド内。ただし、この段階では DOM ノードがまだ利用できないため、これは機能しません。

代わりに、DOM がレンダリングされた後にフォーカスを設定する必要があります。これを行う 1 つの方法は、フォーカス操作用の関数を作成し、それをcomponentDidUpdate() ライフサイクル メソッドから呼び出すことです。以下に例を示します。

<code class="javascript">class MyComponent extends React.Component {
  focusInput() {
    this.inputElement.focus();
  }

  componentDidUpdate() {
    this.focusInput();
  }

  render() {
    return <input ref={el => this.inputElement = el} />;
  }
}</code>

または、autoFocus プロパティを活用することもできます。

<code class="javascript"><input autoFocus name="..." /></code>

これにより、マウント時に入力が自動的にフォーカスを受け取ることが保証されます。 JSX の autoFocus プロパティの大文字化に注意してください。

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