1. 非制御コンポーネントとは何か

非制御コンポーネントとは、入力フォームの値をReactのStateで管理せず、 HTMLがもともと持っている仕組みに任せる方法です。 Reactが細かく管理しないため「非制御」と呼ばれます。

例えるなら、先生が全員のノートを回収せず、生徒が各自でノートを持っている状態です。必要なときだけ中身を見せてもらいます。

2. 制御コンポーネントとの違い

制御コンポーネントは、入力内容を常にStateに保存します。一方、非制御コンポーネントは、入力中はReactが関与しません。必要になった瞬間だけ値を取り出します。

紙に書いたメモをその場で読むのが非制御、ノートに清書してから読むのが制御、と考えると分かりやすいです。

3. refを使った基本的な非制御コンポーネント

非制御コンポーネントでは、refという仕組みを使います。 refは「その場所を直接指し示す目印」です。入力欄そのものに直接アクセスできます。


import React, { useRef } from "react";

function App() {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>表示</button>
    </div>
  );
}

export default App;

（入力した文字が、ボタンを押したときに表示されます）

4. defaultValueを使った初期値の設定

非制御コンポーネントでは、初期値を設定したい場合にdefaultValueを使います。これは最初に表示する値だけを決めるものです。途中でReactが値を変更することはありません。


import React, { useRef } from "react";

function App() {
  const inputRef = useRef(null);

  return (
    <div>
      <input type="text" defaultValue="はじめから入っている文字" ref={inputRef} />
      <button onClick={() => alert(inputRef.current.value)}>
        確認
      </button>
    </div>
  );
}

export default App;

（最初から文字が入力された状態で表示されます）

5. フォーム送信で非制御コンポーネントを使う

非制御コンポーネントは、フォーム送信との相性が良いです。入力中の処理が不要で、送信時だけ値を使いたい場合に向いています。


import React, { useRef } from "react";

function App() {
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("名前：" + nameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（フォーム送信時に入力内容が表示されます）

6. 複数の入力欄を扱う場合

入力欄が複数ある場合でも、それぞれにrefを用意すれば対応できます。 ReactのStateを増やさなくて済むため、コードがシンプルになります。


import React, { useRef } from "react";

function App() {
  const emailRef = useRef(null);
  const ageRef = useRef(null);

  const handleClick = () => {
    alert(emailRef.current.value + " / " + ageRef.current.value);
  };

  return (
    <div>
      <input placeholder="メール" ref={emailRef} />
      <input placeholder="年齢" ref={ageRef} />
      <button onClick={handleClick}>確認</button>
    </div>
  );
}

export default App;

（それぞれの入力内容がまとめて表示されます）