［React］シンプルなTodoアプリを作成中。formからデータが受け取れず困っています。

Question

#実現したいこと

質問を見て下さってありがとうございます。

formからデータを受け取って、配列に追加、setStateして、一覧表示したいです。

#問題
formから取得できるはずのデータが取得できず、undefinedになってしまいます。console.log(event.target.value)が未定義に....

#実際のコード

練習で作っているので、一つのファイルにまとめて書いています。
見やすいようにコメントをつけました。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

//　form　- ここにstateをもたせるべきか
class TodoInput extends React.Component {
  render() {
    return (
      <>
        <input name="title" type="text" placeholder="タイトルを入力" />
        <br />
        <textarea name="description" type="text" placeholder="内容を入力" />
        <br />
        <button onClick={this.props.handleSubmit}>追加</button>
      </>
    );
  }
}

// todoの一つの要素を表すコンポーネント
const TodoItem = props => {
  return (
    <>
      <li>{props.title}</li>
      <li>{props.description}</li>
    </>
  );
};

// データを受けて一覧表示させている
class TodoList extends React.Component {
  render() {
    const list = this.props.tasks.map(task => {
      return <TodoItem {...task} key={task.id} />;
    });
    return (
      <>
        <ul>{list}</ul>
      </>
    );
  }
}

// 親コンポーネント、stateをここに固めたい。
// formで入力した情報をクリックしたらsetStateしたい。
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      tasks: [],
      uniqueId: 1
    };
  }

  handleClick(e) {
    // 入力情報がeventに反映されていない
    const newTitle = e.target.title.value;
    const newDescription = e.target.description.value;
    const newUniqueId = this.state.uniqueId + 1;
    const newTasks = this.state.tasks.slice();

    newTasks.push({
      title: newTitle,
      description: newDescription,
      id: newUniqueId
    });

    this.setState({ newTasks });

    e.target.title.value = "";
    e.target.description.value = "";
  }

  resetTodo = () => {
    this.setState({
      tasks: []
    });
  };

  render() {
    return (
      <>
        <p>Todo App</p>
        <button onClick={this.resetTodo}>一括削除</button>
        <br />
        <TodoInput handleSubmit={this.handleClick.bind(this)} />
        <TodoList tasks={this.state.tasks} />
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

#どうかご回答お願いいたします。

Answer 1

こんにちは。

いくつかの点で修正したソースを以下に回答します。

主となる修正は、ご質問のタイトルにある、「formからデータが受け取れず困っています。」 に対して、

• App の this.state にフォームから入力された値を持たせ、これを変更するメソッドを追加し、<input /> および <textarea /> の onChangeハンドラに設定

したことです。以下、修正後のソースです。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// 新規Todo入力フォーム
const TodoInput = ({ title, description, handleChange, handleSubmit }) => (
  <>
    <input
      name="title"
      type="text"
      placeholder="タイトルを入力"
      value={title}
      onChange={handleChange}
    />
    <br />
    <textarea
      name="description"
      placeholder="内容を入力"
      value={description}
      onChange={handleChange}
    />
    <br />
    <button onClick={handleSubmit}>追加</button>
  </>
);

// todoの一つの要素を表すコンポーネント
const TodoItem = ({ title, description }) => (
  <>
    <li>{title}</li>
    <li>{description}</li>
  </>
);

// データを受けて一覧表示させている
const TodoList = ({ tasks }) => (
  <ul>{tasks.map(task => <TodoItem {...task} key={task.id} />)}</ul>
);

// 親コンポーネント、stateをここに固めたい。
// formで入力した情報をクリックしたらsetStateしたい。
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [],
      uniqueId: 1,
      form: { title: "", description: "" },
    };
  }

  handleChange = (e) => {
    this.setState({
      form: { ...this.state.form, [e.target.name]: e.target.value },
    });
  };

  handleClick = () => {
    const newTask = {
      ...this.state.form,
      id: this.state.uniqueId,
    };
    this.setState({
      tasks: [newTask, ...this.state.tasks],
      uniqueId: this.state.uniqueId + 1,
      form: { title: "", description: "" },
    });
  };

  resetTodo = () => {
    this.setState({
      tasks: []
    });
  };

  render() {
    return (
      <>
        <p>Todo App</p>
        <button onClick={this.resetTodo}>一括削除</button>
        <br />
        <TodoInput
          {...this.state.form}
          handleChange={this.handleChange}
          handleSubmit={this.handleClick}
        />
        <TodoList tasks={this.state.tasks} />
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上記のコードを含むレポジトリを以下に上げています。

• jun68ykt/q167369: https://github.com/jun68ykt/q167369

　

上記のレポジトリは以下のコミットを古い順に含みます。

• initial commit :ご質問に挙げられているコードをそのままコピペして、src/index.js を作成し、他のファイルも追加して動くようにしたものです。

　　

• スタイル追加

　

• フォームからの入力値を追加タスクに反映 :これがご質問の主旨に対する修正コミットになります。このコミットでとりあえず意図どおりに動くようになります。

　

• constructorの引数props追加

　

• TodoInput, TodoItem, TodoList をFunctional Componentにする : コミットメッセージに若干間違いがありました。TodoInputとTodoListはstateを持つ必要がないことを明示するため、Functional Componentにしました。TodoItem については元からFunctionalですが、return を無くして若干コードを簡素化しました。

以下の画像は、修正後のものを起動してブラウザに表示させ、２つTodoを追加した後、3つ目を入力中の画面キャプチャです。

以上、参考になれば幸いです。

Comments

[uk_63]

丁寧な回答ありがとうございます。
ひとつ前の質問にも答えてくださった本当に助かりました。
解説もわかりやすく非常に参考になります。

ありがとうございました！

[jun68ykt]

どういたしまして。お役に立てましたようで、よかったです????