Exchange of values between files in React

From the introduction of the first React "Introduction" to the basics~Create a TODO app and learn!
I am trying to create a TODO application by referring to .
I would like to divide it into functions such as Home.js, todo.js, and add.js as follows.I would like to pass the value to the state in todo.js when the button is clicked in add.js. What should I do?
Thank you for your cooperation.

Home.js

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

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

todo.js

import React, {Component} from "react";

class Todo extensions 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";

classAdd extensionsComponent {
  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}>Register</button>
      </div>
    );
  }
}

export default Add;

reactjs

2022-09-29 22:04

1 Answers

Hello, I started studying React the day before yesterday.

"I think we can solve this problem by doing ""state lift-up""."Official documentation may refer to:

10.state Lift Up-MAIN CONCEPTS
State Lift Up - A Section in the Tutorial

If you want to collect data from more than one child element, or if you want two child components to interact with each other, you must instead declare a state of sharing within the parent component.Parent components can use props to return information to their children.This ensures that the child components are always synchronized with one another or with the parent.

If you want to collect data from more than one child element, or if you want two child components to interact with each other, you must instead declare a state of sharing within the parent component.Parent components can use props to return information to their children.This ensures that the child components are always synchronized with one another or with the parent.

(I think the content of the tutorial is almost the same as what I'm trying to do this time)

In this code, I would like to communicate todos (element) with the child components of Add, Todo, so I think you should manage todos state with Home.

Home.js:

export default class Home extensions 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>
        <Todotos={this.state.todos}/>
        <Add onAddTodo={this.handleAddTodo}/>
      </div>
    );
  }
}

Differential Link to Question Code

2022-09-29 22:04

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656