Question

我是React的新手。试图制作一个购物车，我有一个数据阵列作为待售项目，正在循环并在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;

Answer 1

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

html="""<style>
    body{
    some-css:10px;
    }
    </style>
    <body>
    <h1>{param1}</h1>
    <h2>{param2}</h2>
    </body>"""
print(html.format(param1=12,param2=22))

到

onClick={handleCheck}

和onClick={() => handleCheck(item.id)}到

handleCheck()

Answer 2

或者您可以使用

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


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

定位地图功能中的点击卡索引

2 个答案: