Reactのフォーカス管理と制御方法

autoFocus属性を使用する方法: Reactコンポーネントで要素にフォーカスを自動的に設定するには、HTMLのautofocus属性と同様に、Reactのautofocus属性を使用できます。例えば、以下のように使用します:

<input type="text" autoFocus />

Refを使用する方法: ReactのRefを使用して、要素への参照を取得し、フォーカスを設定することもできます。以下は、クラスコンポーネントとフックを使用した例です:

クラスコンポーネントの例:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    this.myRef.current.focus();
  }
  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

フックを使用した例:

function MyComponent() {
  const myRef = useRef(null);
  useEffect(() => {
    myRef.current.focus();
  }, []);
  return <input type="text" ref={myRef} />;
}

イベントハンドリングを使用する方法: Reactでは、イベントハンドラを使用して要素にフォーカスを設定することもできます。以下は、ボタンがクリックされたときにテキストボックスにフォーカスを設定する例です:

function MyComponent() {
  const handleButtonClick = () => {
    document.getElementById('myInput').focus();
  };
  return (
    <div>
      <input id="myInput" type="text" />
      <button onClick={handleButtonClick}>フォーカスを設定</button>
    </div>
  );
}

これらはReactでフォーカスを管理および制御するための一般的な方法のいくつかです。他にもさまざまな方法がありますが、上記の方法はよく使用されるものです。必要に応じて、これらの例をカスタマイズして自分の要件に合わせて使用することができます。