使用来自不同路径的状态反应

Question

当我单击Movieitem.js中的“喜欢的按钮”时，我想拿到电影标题，并想将我的状态

import React, { Component } from 'react';
import { store } from '../..';
import './MovieItem.css';


class MovieItem extends Component {
    render() {
        const { Title, Year, Poster } = this.props;
        console.log(this.props.Poster);
        return (
            <article className="movie-item">
                <img className="movie-item__poster" src={Poster} alt={Title} />
                <div className="movie-item__info">
                    <h3 className="movie-item__title">{Title}&nbsp;({Year})</h3>
                    <button onClick={()=>console.log(Title)} type="button" className="movie-item__add-button">Добавить в список</button>
                </div>
            </article>
        );
    }
}
 
export default MovieItem;

添加

import React, { Component } from 'react';
import './Favorites.css';


class Favorites extends Component {
    state = {
        title: '',
        movies: [
            { imdbID: 'tt0068646', title: 'The Godfather', year: 1972 }
        ]
    }
    render() { 
        return (
            <div className="favorites">
                <input value="Новый список" className="favorites__name" />
                <ul className="favorites__list">
                    {this.state.movies.map((item) => {
                        return <li key={item.id}>{item.title} ({item.year})</li>;
                    })}
                </ul>
                <button type="button" className="favorites__save">Сохранить список</button>
            </div>
        );
    }
}
 
export default Favorites;

到fairst。在fafitiTemovie.js中

Answer 1

尝试使用上下文或redux存储您的收藏夹列表，并在其中保存一些重要信息，例如ID标题等