React Academy · レッスン

useRefによる非制御入力

Q: 「useRefによる非制御入力」で何を学びますか？

シンプルなフォームではstateの代わりにrefを使ってDOM入力値にアクセスします ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

シンプルなフォームではstateの代わりにrefを使ってDOM入力値にアクセスします

「useRefによる非制御入力」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、useRefを使った非制御入力を利用し、Reactのstateで管理することなくDOMの入力値にアクセスします。

制御された入力と非制御入力

**制御された入力**では、Reactのstate（value + onChange）によって値が管理されます。**非制御入力**では、DOMが独自に値を管理し、Reactは必要なときだけrefを通じて値を読み取ります。

// Controlled
<input value={name} onChange={e => setName(e.target.value)} />

// Uncontrolled
const nameRef = useRef();
<input ref={nameRef} defaultValue="" />

送信時に値を読み取る

非制御入力では、フォームの送信時に`ref.current.value`へアクセスして値を読み取ります。ユーザーが入力している間は、stateの更新は発生しません。

function Form() {
  const nameRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

defaultValueとvalue

非制御入力では、初期値の設定に`defaultValue`（`value`ではありません）を使います。`onChange`なしで`value`を設定すると、Reactが警告を表示し、入力は読み取り専用になります。

<input ref={nameRef} defaultValue="Initial text" />

非制御入力を使う場合

非制御入力は、送信時にだけ値が必要な単純なフォーム、Reactでは制御できないファイル入力、再レンダリングを避けることが重要なパフォーマンス重視の入力に役立ちます。

非制御入力をリセットする

非制御入力をリセットするには、命令的に`ref.current.value = ''`を設定します。または、コンポーネントの`key`propsを変更して、Reactに新しいDOMノードで再マウントさせます。

// Reset imperatively
nameRef.current.value = '';

// Or remount
setFormKey(k => k + 1);
<input key={formKey} ref={nameRef} />

複数の入力に複数のrefを使う

複数の非制御フィールドがあるフォームでは、入力ごとに個別のrefを作成します。送信時に各refの`.current.value`へアクセスします。

const emailRef = useRef();
const passwordRef = useRef();

<input ref={emailRef} type="email" />
<input ref={passwordRef} type="password" />

マウント時にフォーカスする

useRefは、コンポーネントのマウント時に入力へ自動的にフォーカスするためによく使われます。マウント後、useEffect内でrefを読み取ります。

const inputRef = useRef();
useEffect(() => {
  inputRef.current?.focus();
}, []);
<input ref={inputRef} />

非制御入力とバリデーション

非制御入力をバリデーションするには、送信時に命令的に値を読み取る必要があります。リアルタイムのバリデーションでは、制御された入力よりも扱いが複雑です。すぐにフィードバックを表示する必要がある場合は、制御された入力を優先してください。

useRefのトレードオフ

非制御入力では再レンダリングを避けられますが、Reactのリアクティブ性を失います。refを読み取って手動でstateを更新しない限り、入力値に応じた条件付きレンダリングをリアルタイムで行うことはできません。

確認問題

Reactで非制御入力の初期値を設定するには、どのpropsを使いますか？

まとめ

非制御入力では、必要なときに値を読み取るためにrefを使います。初期値の設定にはdefaultValueを使い、送信時にはref.current.valueを読み取り、refの値を消去するかkeyを変更してリセットします。

次のレッスン：**ファイル入力とファイルデータの読み取り** — ファイル入力を扱い、FileReaderを使ってメタデータと画像データを読み取ります。

よくある質問