javascript - 如何从功能组件中另一个组件中的组件获取ID

Question

我是新来的反应，

我正在尝试从卡片数组中获取单个卡片 ID。我不知道该怎么做。

我的代码看起来像这样。

卡片.js

import React from "react";

const cardDetailsClick = (ID) => {
    console.log("card id is " + ID);
};

const Card = ({ title, id }) => {
    return (
        <div className="card">
            <div className="description">
                <h1>{title}</h1>
                <button onClick={onBtnClick}>Know more</button>
            </div>
        </div>
    );
};

app.js——在这里我想要我点击的卡片的ID

import React from "react";
const [cards, setCards] = useState([]);
// I have setCards to be 20 different cards each has a unique id.
onBtnClick = (id) => {
    console.log(id); // I want the id of the card button I click here
};

const Cards = () => {
    return <div>{cards.length > 0 && cards.map((card) => <Card key={card.id} {...card} />)}</div>;
};

export default Cards;

我想获取单击按钮的那张卡的 ID。

帮助将不胜感激！

标签： javascriptreactjs

Answer 1

尝试这个：

const cardDetailsClick = (e,ID) => {
    console.log("card id is " + ID);
};

const Card = ({ title, id }) => {
    return (
        <div className="card">
            <div className="description">
                <h1>{title}</h1>
                <button onClick={(e)=> onBtnClick(e,id)}>Know more</button>
            </div>
        </div>
    );
};