时间戳

首页 > 解决方案 > 如何在事件调用中获取卡 ID？

reactjs - 如何在事件调用中获取卡 ID？

问题描述

我的代码有一个下面给出的 const -

 const cardObject=[
        
        {
                "img":"/my_web_resume/static/media/tcs.cab517d9.jpg",
                "title":"Tata Consultancy Services",
                "des":"Currrently working with TCS as a System Engineer",
                "period":"Jan 2020 - Present",
                "loc":"Noida, UttarPradesh"
        
            },
            {
        
                "img":"/my_web_resume/static/media/mapmyindia.67305014.jpg",
                "title":"MapMyIndia",
                "des":"Worked With MapmyIndia as a Software Development Engineer",
                "period":"Mar 2018 - Jan 2019",
                "location":"Noida, UttarPradesh"
        
            }
        ]

这个作为道具传递给另一个组件 -

  <Experience crdObj={cardObject} onClick={this.handleClick} />

我还将回调函数传递给体验组件。

在这里，我创建了 2 张这样的卡片 -

class Experience extends Component{
     render() {
 return (
          <div className={`container  mt-2 w-100 ${styles.container}`} >
        {/* <MyCard className={styles.mycard} src={tcsimg} title="Tata Consultancy Services" text="Currently working with TCS as a System Engineer." date="From Jan 2020 To Present" location="Location - Noida,UP"/>
        <MyCard classname={styles.mycard} src={mmimg} title="MapMyIndia" text="Worked with MapMyIndia as a Software Development Engineer." date="From Mar 2018 To Jan 2019" location="Location - Okhla,Delhi"/> */}
{
  this.props.crdObj.map(item=>
  {
    

return <MyCard className={styles.mycard} src={item.img} title={item.title} text={item.des} date={item.period} location={item.loc} onClick={this.props.onClick} />


  })
}
 </div>
        )
   }
    }

现在我将所有参数传递给卡组件-

class MyCard extends Component

{ render() {
     
 return (
            <div >
            <Card style={{ width: '18rem' }} className={styles.card}>
    <Card.Img variant="top" src={this.props.src} className={styles.img} />

    <Card.Body>
        <Card.Title>{this.props.title}</Card.Title>
      <Card.Text>
       {this.props.text}
      </Card.Text>
    </Card.Body>
    <ListGroup className="list-group-flush">
        <ListGroupItem>{this.props.date}</ListGroupItem>
        <ListGroupItem>{this.props.location}</ListGroupItem>
      {/* <ListGroupItem>Vestibulum at eros</ListGroupItem> */}
    </ListGroup>
    <Card.Body>
      {console.log(this.props.onClick)}
      <Card.Link onClick={this.props.onClick}>know more..</Card.Link>
      {/* <Card.Link href="#">Another Link</Card.Link> */}
    </Card.Body>
  </Card>
        
       </div>
        )
    }
}

这里卡片组件调用了我作为道具传递的函数。该函数调用完美，但是当我点击了解更多时..我怎么知道点击了哪张卡片。我想将卡片参数传递给父级。

提前致谢....

标签： reactjsreact-native

解决方案

像这样将 onClick 函数从父级传递给子级

return <MyCard cardObject={cardobject} handleClick={this.handleCardClick} />

在父组件中定义您的 handleClick 函数

const handleCardClick = (cardObject) => {
    console.log( "clicked card is " , cardObject);
}

然后在子组件中调用 onClick 函数

<div onClick={ () => this.props.handleClick(this.props.cardobject)} >

 <Card>

</Card>

</div>

推荐阅读