@shi_082844 (道浩清水)posted at 2022-11-23

TodoList作成に際する質問

Q&A

JavaScript ToDoリスト React 初心者エンジニア

解決したいこと

■ TodoListを作成中、タスクを入力できない
■ e.target.valueの役割について

現状の解決できない具体的な画像

①タスクに文字を入力できない

②追加を押すと編集・削除ボタンしか追加されない

該当するソースコード

import './App.css';
import { useState } from "react";
import { Title } from "./components/Title"

function App() {
  const [text, setText] = useState("");
  const [todoList, setTodoList] = useState([]);
  
  const onAdd = () => {
    setTodoList((prev) => {
      return [...prev, text];
    });
  };


  return (
    <div>
      <Title />
      <input
        placeholder="タイトルを入力"
        onchange={(e) => setText(e.target.value)}
        value={text}
      />
      {text}
      <button onClick={() => onAdd()}>追加</button>
      <div>
        <ul className="lists">
          {todoList.map((todo) => {
            return (
              <>
                <li>{todo}</li>
                <button className="btn ">編集</button>
                <button className="btn ">削除</button>
              </>
            );
          })}
        </ul>
      </div>
    </div>
  );
}

export default App;

自分で試したこと

現状、どこを修正してタスクを追加できるのか理解できていない。
e.target.valueも具体的な意味を理解できていません。

1Answer

@mizu0715 posted at 2022-11-23

TodoListを作成中、タスクを入力できない

onchange={(e) => setText(e.target.value)}

× onchange
○ onChange
恐らくこちらが原因ではないでしょうか？

JSXはHTMLのように書けますが実際は別物で、HTMLの属性をキャメルケースで表現するお約束があります。

React では、DOM のプロパティと属性（イベントハンドラを含む）全てがキャメルケースで名前付けされる必要があります。例えば、HTML 属性 tabindex に React で対応する属性は tabIndex です。

e.target.valueの役割について

e.target.valueは今回のケースで言うと、
inputに入力などのイベントが発生した際に(e)にイベントのオブジェクトがセットされます。

イベントのオブジェクトの要素から入力された値を取得している形です。

console.logでe, e.target, e.target.valueそれぞれ出力して中身を見てみるとイメージしやすいかもしれないですね

e

イベントのデータが入ったオブジェクト

e.target

<input placeholder="タイトルを入力" value="hoge">

e.target.value

value="hoge"のhoge

1Like

Comments

@shi_082844
Questioner
ありがとうございます。
○ onChangeに変更し、入力が出来ました。

e.target.valueについては、いただいた情報をもとに自分の中に落とし込みます。
@mizu0715
よかったです〜

Are you sure you want to delete the question?