如何在 React 中使用 onclick 將數據從一個組件/div 發送到另一個

Question

我目前正在開發一個電影應用程序並嘗試添加一個 onclick function ，它將電影數據從電影卡發送到英雄部分。

我是新手，所以我不確定如何解決這個問題，也找不到任何好的信息。

到目前為止，我已經創建了從 App.js 接收電影數據作為道具的輪播組件。 然后我在 Carousel 組件中也有一個英雄部分，並希望在這個 div 中顯示數據。

這就是我所擁有的：

 function TestCarousel({items}) { //state const [Title, setTitle] = useState([items.original_title]) // function function movieTitle(e) { console.log('click'); } // Use Effect useEffect(() => { movieTitle(); }, []) return ( <div className="main-container"> <div className="hero"> <img src={Image} className="hero-img" /> <div className="movie-details"> <h1>Title</h1> <p>Movie Description</p> </div> </div> <div className="cards"> {items.map((image, index) => ( <div className="movie-card"> <img src={'https://image.tmdb.org/t/p/w500' + image.poster_path} className='movie-img' onClick={movieTitle}/> {/* <h5 className='movie-card-desc'>{image.original_title}</h5> */} {/* <p className='movie-card-overview'>{movie.overview}</p> */} </div> ))} </div> </div> ); }

這是它的外觀：

Answer 1

您可以在 state 中設置完整的項目，並通過 onclick 更新項目數據，如 -

function TestCarousel({items}) {


    //state 

    const [currentItem, setCurrentItem] = useState(items.at(0));
  

    return (
        
        
       <div className="main-container">

            <div className="hero">

                <img src={currentItem.image} className="hero-img" />

                <div className="movie-details">
                    <h1>{currentItem.original_title}</h1>
                    <p>{currentItem.overview}</p> 
                </div>

            </div>


                <div className="cards">
                    {items.map((item, index) => (

                <div className="movie-card">

                    <img src={'https://image.tmdb.org/t/p/w500' + item.poster_path} className='movie-img' onClick={()=>{setCurrentItem(item)}}/>
                    <h5 className='movie-card-desc'>{item.original_title}</h5>
                    <p className='movie-card-overview'>{item.overview}</p>
        
                </div>

                        ))}
           </div>

        </div> 
        
    );
}

Answer 2

你可以先刪除useEffect，然后是card部分

<img src={'https://image.tmdb.org/t/p/w500' + image.poster_path} className='movie-img' onClick={() => movieTitle(image.original_title)}/>
     

同樣在movieTitle

function movieTitle(val) {
        setTitle(val);  
    }

此外，如果您想發送圖像和標題，您應該創建新的 state，

像這樣的東西；

const [movie, setMovie] = useState(null);

然后在卡片部分

<img src={'https://image.tmdb.org/t/p/w500' + image.poster_path} className='movie-img' onClick={() => {
movieTitle(image.original_title);
setMovie(image)}/>

然后使用它，例如<h1>{movie.original_title}</h1>