1

初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう!
を参考にTODOアプリを作成しようとしています。
以下のようにHome.js,todo.js,add.jsのように機能ごとに分けたいです。その際add.js内においてボタンがクリックされた際にtodo.js内のstateに値を渡したいのですが、どのようにすればよいでしょうか。
よろしくお願いします。

Home.js

import React, { Component } from "react";
import Add from "./add";
import Todo from "./todo";

export default class Home extends Component {
  render() {
    return (
      <div>
        <Todo />
        <Add />
      </div>
    );
  }
}

todo.js

import React, { Component } from "react";

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      name: "",
    };
  }
  render() {
    const { todos } = this.state;

    return (
      <div>
        <ul>
          {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      </div>
    );
  }
}
export default Todo;


add.js

import React, { Component } from "react";

class Add extends Component {
  onInput = (e) => {
    this.setState({
      name: e.target.value,
    });
  };
  addTodo = () => {
    const { todos, name } = this.state;
    this.setState({
      todos: [...todos, name],
    });
  };

  render() {
    return (
      <div>
        <input type="text" onInput={this.onInput} />
        <button onClick={this.addTodo}>登録</button>
      </div>
    );
  }
}

export default Add;

1 件の回答 1

1

こんにちは。私もちょうど一昨日からReactを勉強し始めました。

今回の件は、"stateのリフトアップ"を行うことで解決できるかと考えます。公式ドキュメントの次の箇所に言及があります:

  • 10. state のリフトアップ - MAIN CONCEPTS
  • State のリフトアップ - チュートリアル中の一節

    複数の子要素からデータを集めたい、または 2 つの子コンポーネントに互いにやりとりさせたいと思った場合は、代わりに親コンポーネント内で共有の state を宣言する必要があります。親コンポーネントは props を使うことで子に情報を返すことができます。こうすることで、子コンポーネントが兄弟同士、あるいは親との間で常に同期されるようになります。

(チュートリアルの内容は、今回やろうとしていることとほぼ一致しているかと思います)

今回のコードで言うと、 todos(の要素)を Add, Todo という Home の子コンポーネント同士でやり取りしたいので、 Hometodos state を管理すれば良い、ということになるかと思います。

Home.js:

export default class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [],
    };
  }

  handleAddTodo = (name) => {
    const todos = this.state.todos.slice();
    todos.push(name);
    this.setState({ todos });
  };

  render() {
    return (
      <div>
        <Todo todos={this.state.todos} />
        <Add onAddTodo={this.handleAddTodo} />
      </div>
    );
  }
}

質問コードとの差分リンク

1
  • 丁寧な回答、ありがとうございます。理解できました。
    – peridotite
    Commented 2020年4月12日 23:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。