

[初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！](https://webkikaku.co.jp/homepage/blog/hpseisaku/javascript/react-
start/)  
を参考にTODOアプリを作成しようとしています。  
以下のようにHome.js,todo.js,add.jsのように機能ごとに分けたいです。その際add.js内においてボタンがクリックされた際にtodo.js内のstateに値を渡したいのですが、どのようにすればよいでしょうか。  
よろしくお願いします。

Home.js

[code]

    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>
        );
      }
    }
    
    
[/code]

todo.js

[code]

    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;
    
    
    
[/code]

add.js

[code]

    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;
    
    
[/code]


CC BY-SA 4.0
2020-04-10T13:14:25.507
65524
2022-08-03T08:05:45.663
30396
question
reactjs
Reactにおけるファイル間の値のやり取り


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

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

  * [10\. state のリフトアップ](https://ja.reactjs.org/docs/lifting-state-up.html) \- MAIN CONCEPTS
  * [State のリフトアップ](https://ja.reactjs.org/tutorial/tutorial.html#lifting-state-up) \- チュートリアル中の一節 

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

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

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

Home.js:

[code]

    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>
        );
      }
    }
    
    
[/code]

[質問コードとの差分リンク](https://github.com/yukihane/stackoverflow-
qa/commit/971e308920bd65c60551a82ce9d1b37f771faad7)


CC BY-SA 4.0
2020-04-10T19:54:40.833
65526
2020-04-10T19:54:40.833
2808
65524
answer