reactjs - 如何在反应中通过 onClick 获取卡 ID？

Question

这是卡片上使用的 favorite.jsx 类的一段代码，当我按下收藏夹时，它会改变心形图标的颜色。但是，我希望它也可以控制台记录该特定卡的 ID。你能帮我吗？

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import resturants from '../resturants';

const gray = 'gray';
const red = 'red';

export default class Favorite extends Component{
  constructor(props){
    super(props);

    this.state = { 
        color: gray 
    };

    this.changeColor = this.changeColor.bind(this);
  }

  changeColor(){
    
    const newColor = this.state.color == gray ? red : gray;
    this.setState({ color: newColor })
    console.log();
    // make post request axios 
  }
  render(){
    return(
       <i className="favorite fa fa-heart" onClick={this.changeColor} style={{color: this.state.color}}></i>
    )
  }
}

这是 resturant.js 类，它包含创建卡片所需的所有数据，包括 id

const resturants = [
    {
      id: 1,
      name: "Macdolands",
      stars: 3.3,
      favorite: "Fulled heart",
      types: "Fastfood",
      imgURL:
        "https://rinnoo.net/f/CMS/Listings/15_Mcdonalds-Restaurant-Logo_-_Qu80_RT1600x1024-_OS300x300-_RD300x300-.jpg",
      status: "Open!",
      descreption: "Macdolands is a fast food resturant that is famous with Big mac! Macdolands is a fast food resturant that is famous with Big mac! Macdolands is a fast food resturant that is famous with Big mac!",
      filters: "Music"
    },
    {
      id: 2,
      name: "herfy",
      stars: 4.2,
      userRate:0,
      favorite: "Fulled heart",
      types: "Fastfood",
      imgURL:
        "https://rinnoo.net/f/CMS/Listings/15_Mcdonalds-Restaurant-Logo_-_Qu80_RT1600x1024-_OS300x300-_RD300x300-.jpg",
      status: "Open!",
      descreption: "Macdolands is a fast food resturant that is famous with Big mac! Macdolands is a fast food resturant that is famous with Big mac! Macdolands is a fast food resturant that is famous with Big mac!",
      filters: "Music"
    },
    {
      id: 3,
      name: "MacdolandsMacdolandsMacdolands",
      stars: 2.4,
      favorite: "Fulled heart",
      types: "Fastfood",
      imgURL:
        "https://rinnoo.net/f/CMS/Listings/15_Mcdonalds-Restaurant-Logo_-_Qu80_RT1600x1024-_OS300x300-_RD300x300-.jpg",
      status: "Closed!",
      descreption: "Macdolands is a fast food resturant that is famous with Big mac! Macdolands is a fast food resturant that is famous with Big mac! Macdolands is a fast food resturant that is famous with Big mac!",
      filters: "Music"
    }
  ];
  
  export default resturants;

卡号

import React from "react";
import Avatar from "./Avatar";
import Detail from "./Detail";
import ReadStars from "./Star-rating";
import Favorite from "./Favorite";


function Card(props) {
  return (
    <div className="card">
      <Avatar img={props.img} />
      <div className="flexname">
        <h2 className="name">{props.name}</h2>
        {/* <Star className="rating">{props.stars}</Star> */}
        <ReadStars className="rating" value={props.stars}></ReadStars>
      </div>
      <div className="flexfav">
        <h3 className="status">{props.status}</h3>
        <Favorite className="favorite">{props.favorite}</Favorite>
      </div>
      <h4 className="types">{props.types}</h4>
      <h4 className="filters">{props.filters}</h4>
      <Detail detailInfo={props.descreption} />
    </div>
  );
}

export default Card;

标签： reactjs

Answer 1

正如评论中提到的@Punith，您应该将卡 ID 传递给您的收藏夹组件。

我假设该Favorite组件在组件中使用Card。我还假设每个Card组件都有一个唯一的 ID。

对于您的卡代码：

function Card(props) {
  return (
     <div>
      {// lots of Card markup...}
      <Favorite className="favorite">{props.favorite}</Favorite>
     </div>
  )
}

如果是这种情况，那么在Card您需要添加someId作为道具Favorite

<Favorite cardId={props.theCardId} className="favorite">{props.favorite}</Favorite>

然后在Favorite组件中，您可以使用您传递的道具 - 请注意此处的“更新行”：

export default class Favorite extends Component{
  constructor(props){
    super(props);

    this.state = { 
        color: gray 
    };

    this.changeColor = this.changeColor.bind(this);
  }

  changeColor(){
    
    const newColor = this.state.color == gray ? red : gray;
    this.setState({ color: newColor })
    console.log(this.props.cardId);  // <----- UPDATED LINE ~~~~~~
    // make post request axios 
  }
  render(){
    return(
       <i className="favorite fa fa-heart" onClick={this.changeColor} style={{color: this.state.color}}></i>
    )
  }
}