問題一覧に戻る
中級高度なパターン
問題59: 非制御コンポーネント

refを使用してDOM要素に直接アクセスする非制御コンポーネントの実装を学びます。stateで管理せず、必要な時にのみDOMから値を取得します。defaultValueで初期値を設定し、フォーム送信時なcurrentプロパティでDOM要素にアクセスします。大量のフォーム入力や、再レンダリングを減らしたい場合に有効です。ただし、Reactの宣言的なパラダイムから外れるため、使用は最小限に留めましょう。

import React, { useRef } from 'react';

function Form() {
  {/* refオブジェクトを作成 */}
  const inputRef = ();

  const handleSubmit = () => {
    {/* DOMから値を取得 */}
    alert(inputRef..value);
  };

  return (
    <div>
      {/* refをDOMにアタッチ */}
      <input ={inputRef} defaultValue="初期値" />
      <button onClick={handleSubmit}>送信</button>
    </div>
  );
}

export default Form;
···