実施条件

[React][L1] Stateを用いてコンテンツ(li)を出力するを理解していること

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

ソースコードの前に

フォルダ構成

folda_structure

├── package.json
├── public/
│   └── index.html
├── src/
│   ├── index.jsx
│   ├── Todo.jsx
│   └── styles.css
│

index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head> </head>

  <body>
    <div id="root"></div>
  </body>
</html>

index.jsx

index.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { Todo } from "./Todo";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Todo />
  </StrictMode>
);

ソースコード

Todo.jsx(旧)

Todo.jsx

import { useState } from "react";
import "./styles.css";

export const Todo = () => {
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2",
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    "TODOでした1",
    "TODOでした2",
  ]);

  return (
    <>
      <div className="input-area">
        <input placeholder="TODOを入力"></input>
        <button>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul>
          {incompleteTodos.map((todo) => {
            return (
              <li key={todo}>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>完了</button>
                  <button>削除</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="complete-area">
        <p className="title">完了のTODO</p>
        <ul>
          {completeTodos.map((todo) => {
            return (
              <li>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>戻す</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

Todo.jsx

Todo.jsx

import { useState } from "react";
import "./styles.css";

export const Todo = () => {

+ const [todoText, setTodoText] = useState("");
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2",
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    "TODOでした1",
    "TODOでした2",
  ]);

+ const onChangeTodoText = (event) => setTodoText(event.target.value);

  return (
    <>
      <div className="input-area">
-       <input placeholder="TODOを入力"></input>
+       <input placeholder="TODOを入力" value={todoText} onChange={onChangeTodoText}></input>
        <button>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul>
          {incompleteTodos.map((todo) => {
            return (
              <li key={todo}>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>完了</button>
                  <button>削除</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="complete-area">
        <p className="title">完了のTODO</p>
        <ul>
          {completeTodos.map((todo) => {
            return (
              <li>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>戻す</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

解説

目的

inputタグ(テキストボックス)に入力された内容を、todoTextに入力（保持）する

コーディング

inputタグ(テキストボックス)に入力された内容を保持するState(todoText)を用意する

初期値は""

Todo.jsx

export const Todo = () => {

+ const [todoText, setTodoText] = useState("");
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2",
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    "TODOでした1",
    "TODOでした2",
  ]);

inputタグ(テキストボックス)に入力されたvalueをtodoTextに渡す

inputタグにonChangeイベントが設定されていないので、todoTextの初期値は""のまま更新できない

Todo.jsx

  return (
    <>
      <div className="input-area">
-       <input placeholder="TODOを入力"></input>
+       <input placeholder="TODOを入力" value={todoText}></input>
        <button>追加</button>
      </div>

inputタグに入力されたvalueの変更を検知できるように、onChangeイベントを設定する

Todo.jsx

  return (
    <>
      <div className="input-area">
-       <input placeholder="TODOを入力"></input>
+       <input placeholder="TODOを入力" value={todoText} onChange={}></input>
        <button>追加</button>
      </div>

onChangeイベントが発火した時に、todoTextを更新する関数(setTodoText)が動作するようにonChangeTodoTextを実装する
1. inputタグに入力されたvalueが変更される度に、onChangeTodoTextが呼び出される
2. setTodoTextにevent.target.value（入力された値）が渡る
  - event.target.valueについては、Tips参照
3. todoTextが更新される
Todo.jsx
```
+ const onChangeTodoText = (event) => setTodoText(event.target.value);

  return (
    <>
      <div className="input-area">
-       <input placeholder="TODOを入力"></input>
+       <input placeholder="TODOを入力" value={todoText} onChange={onChangeTodoText}>
```

処理

ユーザーがテキストボックスに文字をタイプする
イベントonChangeが発火する
関数onChangeTodoTextが起動する
更新関数setTodoTextの引数にevent.target.valueが渡る
State todoTextにevent.target.valueが渡る
todoTextが更新される
- inputタグ(テキストボックス)に入力されたvalueがState(todoText)に保持される
Reactの再レンダリングがトリガーされる
inputタグ(テキストボックス)に入力されたvalueがtodoText（更新された状態）に更新される

Tips

event.target.value

フォーム要素（例: <input>や<textarea>）の値を取得するためによく使用されるプロパティです。eventはイベントオブジェクトであり、targetはイベントが発生した要素を指します。その中のvalueプロパティが、フォーム要素に入力された現在の値を表します。

ここでは、event.target.valueを使用する関数onChangeTodoTextがセットされた<input>でイベントが発生した場合、<input>内のvalueを取得する。

イメージ

Todo.jsx(旧)

Todo.jsx

参考リンク