Javascript 地图功能中的卡片索引

我是新来的。尝试制作一个购物车，其中我有一系列数据作为待售商品，这些数据被循环并作为卡片显示在DOM上。我想知道用户单击阵列中的哪个项目，以便我可以将其添加到我的购物车中

这是我的密码。如果我含糊不清，请问我任何问题

import React, { Component } from "react";
import "./css/Card.css";

import Data from "./DummyData";

class Card extends Component {
    state = {
        zoom: false,
        NumberOfItemsInCart: 0,
        itemsInCart : [] ,
        selectedCard : ''
};

render() {
// Method Target the selected Card and Zoom it
const handleCheck = (e) => {
  this.setState({
    zoom : true,
    selectedCard : ?????
  })
};

const addItem = () => {
    this.props.addItemToCart(this.state.NumberOfItemsInCart)
    //////////// ADD THE NAME OF THE ITEM SELECTED in Cart Array ///////// 
}
const DeleteItem = () => {
    this.props.DeleteItemFromCart(this.state.NumberOfItemsInCart)
    //////////// DELETE THE NAME OF THE ITEM SELECTED From Aray ///////// 
}

return (
  <div className="band">
    {Data.map((item, index) => {
      return (
        <div key={item.id} className="items" onClick={handleCheck} index={this.state.index}>
            <div className="thumb">{item.title} </div>
            <img className="item-images" src={item.img} alt={item.title} />
            <div className="item-footer"> Price ${item.price}/lb </div>
            <button className="btn btn-details" > Details </button>
            <button onClick={addItem}  className="btn btn-danger"> + </button>
            <button onClick={ DeleteItem}  className="btn btn-danger"> - </button>
        </div>
      );
    })}
  </div>
);
}
}

export default Card;

---

您可以将id作为参数传递，也可以更改

onClick={handleCheck}

到

和handleCheck到

或者你可以使用

onClick={this.handleCheck.bind(this,id)}


handleCheck(){
  this.setState({
    zoom : true,
    selectedCard : id
  })
}

const handleCheck = (id) => {
  this.setState({
    zoom : true,
    selectedCard : id
  })
};

onClick={this.handleCheck.bind(this,id)}


handleCheck(){
  this.setState({
    zoom : true,
    selectedCard : id
  })
}