☰

React Hooksを使用して次のレンダリングにフォーカスする方法 質問する

tag-icon • tag-icon reactjs react-hooks
React Hooksを使用して次のレンダリングにフォーカスする方法 質問する

私はフックを使っていて、次のことをやろうとしています:

import React, { useState, useRef } from 'react';

const EditableField = () => {
  const [isEditing, setEditing] = useState(false);
  const inputRef = useRef();
  const toggleEditing = () => {
    setEditing(!isEditing);
    if (isEditing) {
      inputRef.current.focus();
    }
  };
  return (
    <>
      {isExpanded && <input ref={inputRef} />}
      <button onClick={toggleEditing}>Edit</button>
    </>
  );
};

これは失敗します。currentコンポーネントがまだ再レンダリングされておらず、入力フィールドがまだレンダリングされていない (したがって、まだフォーカスできない) ため、 は null です。

これを行う正しい方法は何ですか？usePreviousReact Hooks FAQ でフックが提案されていますが、面倒な回避策のように思えます。

別の方法はありますか?

ベストアンサー1

あなたはuseEffect変更があった場合にレンダリングごとに関数を実行するフックisEditing。この関数では、入力isEditingがであるかどうかを確認しtrue、入力にフォーカスすることができます。

例

const { useState, useRef, useEffect } = React;

const EditableField = () => {
  const [isEditing, setEditing] = useState(false);
  const toggleEditing = () => {
    setEditing(!isEditing);
  };

  const inputRef = useRef(null);

  useEffect(() => {
    if (isEditing) {
      inputRef.current.focus();
    }
  }, [isEditing]);
  
  return (
    <div>
      {isEditing && <input ref={inputRef} />}
      <button onClick={toggleEditing}>Edit</button>
    </div>
  );
};

ReactDOM.render(<EditableField />, document.getElementById("root"));
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
  
<div id="root"></div>

おすすめ記事