ReactJS：如何从onClick获取每张卡的索引数组

我想在点击每张卡片后打开一个弹出窗口，并在弹出窗口中显示该卡片的信息，但我无法获得“了解索引”键来选择要显示的信息

const childElements = this.state.images.map(function (item, i) {
     return (
        <div key={item.id} data-key={i}>
          
          <MediaCard
            poster={item.largeImageURL}
            id={item.id}
            views={item.views}
            key={item.id}
            data-key={i}
          />
          
        </div>
      );
    });

const childElements=this.state.images.map（函数（项，i）{
返回(
);
});

我必须定义索引数组来选择要在弹出窗口中显示的正确对象

            <StackGrid
              onClick={this.openModal}
            >

              {childElements}

            </StackGrid>

            {this.state.visible ? (
              
              <Popup id={this.state.images['I want to know index after click each card to insert heare'].id} handler={this.handler} />
            ) : null}

{childElements}
{this.state.visible(
)：null}

您不需要知道索引，您可以在您的状态下保存所有图像对象

import React, { useState} from "react";
import "./App.css";



const images = [
      {id: 1, src : "https://d1nhio0ox7pgb.cloudfront.net/_img/i_collection_png/256x256/plain/chess_piece_bishop.png", alt: "image 1"}, 
      {id: 1, src : "https://cdn.iconscout.com/icon/premium/png-256-thumb/bishop-black-games-battle-checkmate-chess-camel-figure-58246.png", alt: "image 2"}
    ]

export default function App() {
  const [image, setImage] = useState({});


  const ChildElements = ({images}) => images.map(function (item, i) {
    return (
       <div key={item.id} data-key={i}>       
         <img
           src={item.src}
           alt={item.alt}         
           key={item.id}
           width='45px'
           data-key={i}
           onClick={() => setImage(item)}
         />       
       </div>
     );
   });


 
  return (
    <div className="App">
      <ChildElements images={images} />

      <h1>Image Selected</h1>
     <img src={image.src} width='90px' alt={image.alt}/>

    </div>
  );
}

在您的

MediaCard

中添加一个onClick事件，在该事件中，您将

项发送到您所在的州

import React, { useState} from "react";
import "./App.css";



const images = [
      {id: 1, src : "https://d1nhio0ox7pgb.cloudfront.net/_img/i_collection_png/256x256/plain/chess_piece_bishop.png", alt: "image 1"}, 
      {id: 1, src : "https://cdn.iconscout.com/icon/premium/png-256-thumb/bishop-black-games-battle-checkmate-chess-camel-figure-58246.png", alt: "image 2"}
    ]

export default function App() {
  const [image, setImage] = useState({});


  const ChildElements = ({images}) => images.map(function (item, i) {
    return (
       <div key={item.id} data-key={i}>       
         <img
           src={item.src}
           alt={item.alt}         
           key={item.id}
           width='45px'
           data-key={i}
           onClick={() => setImage(item)}
         />       
       </div>
     );
   });


 
  return (
    <div className="App">
      <ChildElements images={images} />

      <h1>Image Selected</h1>
     <img src={image.src} width='90px' alt={image.alt}/>

    </div>
  );
}



import React，{useState}来自“React”；
导入“/App.css”；
常量图像=[
{id:1，src:“https://d1nhio0ox7pgb.cloudfront.net/_img/i_collection_png/256x256/plain/chess_piece_bishop.png，alt:“图像1”}，
{id:1，src:“https://cdn.iconscout.com/icon/premium/png-256-thumb/bishop-black-games-battle-checkmate-chess-camel-figure-58246.png，alt:“图像2”}
]
导出默认函数App（）{
const[image，setImage]=useState（{}）；
const ChildElements=（{images}）=>images.map（函数（项，i）{
返回(
setImage（项目）}
/>       
);
});
返回(
选定的图像
);
}
您能从
MediaCard
获取
onClick
事件吗？是的，我可以在MediaCard中推送onClick（onClick={（）=>this.openModal（）}），但什么都没有发生为什么不将该
I
事件存储在
onClick
事件上？你知道，我们在
map
中得到对象的索引。