入力フォーム 打った文字をstateに映す

カウンターで「クリック→stateが変わる→画面が変わる」のループを手に入れました。この章では、入力欄に文字を打つという操作を同じループに乗せます。ToDoアプリで「タスクを入力して追加する」ために必須の部品です。

入力欄とstateを繋ぐ

結論のコードから。

import { useState } from "react";

const NameForm = () => {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>こんにちは、{name}さん</p>
    </div>
  );
};

入力欄に「太郎」と打つと、下の表示が1文字ごとに「こんにちは、太さん」「こんにちは、太郎さん」と追いかけてきます。仕組みを分解します。

useState("") ——文字列のstateです。初期値は空文字。カウンターの数値版と作りは同じです。