Javascript 如何在React引导模式中获取单击的元素数据？

我在从API获取当前单击元素的数据并将其显示在React Bootstrap模式体中时遇到问题。父组件是TopMovies.js，看起来像：

import React, { useState } from 'react';
import TopMoviesModal from '../top-movies-modal/TopMoviesModal';
const TopMovies = ({ currentMovies }) => {
const [isOpen, setIsOpen] = useState(false);

const showModal = () => {
    setIsOpen(true);
};

const hideModal = () => {
    setIsOpen(false);
};

const renderMovies = () => {
    if (Object.keys(currentMovies).length && currentMovies.length) {
        return (
            <div className="movies-labels-container">
                {currentMovies.map((movie) => {
                    return (
                        <div className="movie-label"
                            key={movie.id.attributes['im:id']} title={movie['im:name']['label']}
                            onClick={showModal}>
                            <img className="movie-img" src={movie['im:image'][2]['label']} alt={movie['im:name']['label']} />
                            <br />
                            <div className="text-under">
                                <span id="movie-title">{movie['im:name']['label']}</span>
                                <br />
                                <span id="movie-subtitle">{movie.category.attributes.term}</span>
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    }
};

return (
    <section className="top-movies-list">
        <div className="container-outter">
            <div className="container-fluid">
                <div className="row">
                    <div className="col-lg-12 col-md-12 col-sm-12" id="top-movies-module">
                        <div className="top-movies-container">
                            <h1 className="container-title">
                                TOP 100 movies
                            </h1>
                            {renderMovies()}
                            <TopMoviesModal
                                currentMovies={currentMovies}
                                hideModal={hideModal}
                                isOpen={isOpen} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section >
)}
export default TopMovies;

import React，{useState}来自“React”；
从“../TopMoviesModal/TopMoviesModal”导入TopMoviesModal；
const TopMovies=（{currentMovies}）=>{
常量[isOpen，setIsOpen]=useState（false）；
常量showModal=（）=>{
setIsOpen（真）；
};
常量hideModal=（）=>{
setIsOpen（假）；
};
const renderMovies=（）=>{
if（Object.keys（currentMovies.length&¤tMovies.length）{
返回(
{currentMovies.map（（电影）=>{
返回(


{movie['im:name']['label']}


{movie.category.attributes.term}
);
})}
);
}
};
返回(
百强电影
{renderMovies（）}
)}
导出默认的TopMovies；

子组件TopMoviesModal.js如下所示：

import React from 'react';
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

const TopMoviesModal = ({ currentMovies, hideModal, isOpen }) => {

const renderMoviesDetails = () => {
    if (Object.keys(currentMovies).length && currentMovies.length) {
        return (
            <div>
                {currentMovies.map((movie, index) => {
                    return (
                        <div className="movie-label" key={movie.id.attributes['im:id']}>
                            <span id="movie-title">{movie['im:name']['label']}</span>
                        </div>
                    );
                })}
            </div>
        );
    }
};


return (
    <Modal
        show={isOpen}
        onHide={hideModal}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
    >
        <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
                Modal heading
        </Modal.Title>
        </Modal.Header>
        <Modal.Body>
            {renderMoviesDetails()}
        </Modal.Body>
        <Modal.Footer>
            <Button onClick={hideModal}>Close</Button>
        </Modal.Footer>
    </Modal>
);}
export default TopMoviesModal;

从“React”导入React；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
const-TopMoviesModal=（{currentMovies，hideModal，isOpen}）=>{
const renderMoviesDetails=（）=>{
if（Object.keys（currentMovies.length&¤tMovies.length）{
返回(
{currentMovies.map（（电影，索引）=>{
返回(
{movie['im:name']['label']}
);
})}
);
}
};
返回(
模态标题
{renderMoviesDetails（）}
接近
);}
导出默认的topmoviesmodel；

---

你能帮我解决这个问题吗？我将非常感激，非常感谢

您能否描述更多有关问题和预期行为的信息？问题是我不知道如何获取当前单击的元素。这里有一个对象数组，我必须点击电影标签，然后显示该电影的数据（如标题、描述等）。我知道.map（el，index）函数有第二个参数，比如“index”，这有助于获取当前单击的元素。。但是我忘了怎么做了