logo 公式Webサイト

パワフルな
ブログ

複数のinputを単一のステートで管理

JavaScriptnext.jsReactTypeScript
2024年7月18日

分割代入でinputのidやname等の属性値を取得し、ステートの中身を管理するのが便利でしたので備忘録として複数のinputタグでバリデーションを実装してみます。

ステートを定義

今回はname、type、restと3つのプロパティを用意し、初期設定としてそれぞれの値を設定します。

  const [formData, setFormData] = useState({
    name: "",
    type: "",
    rest: 0,
  });

JSXを作成

今回管理したいinputタグを用意します。

return (
<>
 <input
  type="text"
  classname="formCommon__input"
  id="name"
  onchange="{handleChange}"
 />
 <input
  type="text"
  classname="formCommon__input"
  id="type"
  onchange="{handleChange}"
 />
 <input
  type="number"
  classname="formCommon__input"
  id="rest"
  onchange="{handleChange}"
 />
</>
);

イベント関数を用意

各種タグの入力内容が変更された時に発火するhandleChangeという関数を作成します。

  const handleChange = (e: React.ChangeEvent) => {
    const { id, value, name } = e.target;

    if (name === "type") {
      setFormData((prevData) => ({
        ...prevData,
        type: value,
      }));
    } else {
      setFormData((prevData) => ({
        ...prevData,
        [id]: value,
      }));
    }
  };

e.targetを分割代入することで、e.targetの各種属性値を各変数に割り当てることができます。
さらに、分岐を組み合わせることで更新後の状態をどうするかを調整することができます。
これを用いることで簡易的なエラーバリーデーションの実装や、特定の操作の時に変更したい中身を調整するのにとても便利でした。