Обновить состояние компонентов из другого компонента ReactJS

Question

Я делаю Log In Stuff для своего приложения. Все, что я хочу, - это обновить «username» в компоненте TodoApp.jsx и установить для него то же значение, что и Login.jsx «Username»

Any предложения?

TodoApp.jsx

class ToDoApp extends Component {
state = {
    username:'',
    inputValue: '',
    todos: [],
    currentPage: 1,
    pageCount: 1,
    itemsPerPage: 10,
};

Эта функция создает новый элемент и добавляет его в список задач: [] в состоянии

addItem = () => {
    let {todos} = this.state
    if (this.inpRef.current.value === '') {
        return alert('We dont do that here....')
    } else {
        axios
            .post(`http://localhost:8080/add`, {
                todo: this.inpRef.current.value,
                checked: false,
            })
            .then((res) => {
                this.setState({
                    todos:[...todos,{todo:res.data.todo,_id:res.data._id,checked:false}]
                })
            })
            .catch((err) => {
                console.log("err", err);
            });
        this.setPageCount()
    }
    this.inpRef.current.value = ''
    console.log('--------this.state.todos', this.state.todos);
}

Вот Login.jsx code:

class Login extends Component {
state = {
    username:'',
    password:'',
}

Это функция, которая обрабатывает вход в систему.

 handleLogIn = () => {
        const { username, password } = this.state
        if (password.length === 0 || username.length === 0 ) {
            alert('Incorrect Login!')
        } else {
            axios
                .post(`http://localhost:8080/logIn`, {
                    username: username,
                    password: password,
                })
                .then((res) => {
                    this.props.history.push("/todoapp");
                    console.log('res',res)
                })
                .catch((err) => {
                    console.log("err", err);
                });
        }
    }

Answer 1

Для этого вы можете использовать свойство props в React. js. Если мы предположим, что вы вызвали свой компонент Login в ToDoApp (что делает ToDoApp отцом и Login дочерним компонентом); тогда вы можете определить метод, который устанавливает состояние имени пользователя дочернего компонента.

Например:

Компонент входа: вызовите функцию handle_username отцовский компонент после установки состояния имени пользователя.

this.setState({username: (username input)})    
this.props.handle_username(this.state.username)

Компонент ToDoApp: определите функцию handle_username и передайте ее как реквизит компоненту Login .

  handle_username = (username) => {
       this.setState({username: username})
  }

Завершите передачу в качестве реквизита:

<Login handle_username={this.handle_username}/>

Answer 2

1. Для этого вы можете использовать Redux.
2. передача свойств между этими двумя компонентами.
3. Вызов API для обновления данных и получения API на другой странице.
4. Использование localstorage браузера для хранения входных данных.