入力を扱う ― フォームとstate

導入

テキスト入力の値も state で持つと、「入力した内容をその場で表示する」といったことができます。入力と state を結び付けたものを制御コンポーネントと呼びます。

説明

入力欄の value を state に結び付け、onChange で更新します。

function App() {
  const [text, setText] = React.useState("");
  return (
    <div style={{ fontFamily: "system-ui" }}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="名前を入力"
      />
      <p>こんにちは、{text || "名無し"} さん</p>
      <p>入力した文字数: {text.length}</p>
    </div>
  );
}

• value={text} … 入力欄の中身を state と同じにします。
• onChange={(e) => setText(e.target.value)} … 入力されるたびに e.target.value（入力された文字列）で state を更新します。
• state が変わると再描画され、<p> の表示も即座に更新されます。

やってみよう

入力した文字を大文字に変換して表示してみましょう（{text.toUpperCase()}）。また、文字数が10を超えたら警告文を出すには？（ヒント: {text.length > 10 && <span>長すぎます</span>}）