如何选择我的组件 ID 并将其保存在数组中？

Question

我有一个登录页面，其中包含一个传递给我的 TemplateList 组件的数组。而我的 TemplateList 组件是由 TemplateCard 组件组成的。

我的 TemplateList 上的每张卡片都可以选择，如果选择了超过 2 个卡片，页面上的按钮会激活 onOnboardingComplete，然后继续到下一页。

我想做的是能够获取我在页面上选择的每张卡片的唯一 ID 一旦我选择了一个或多个，将这些 ID 转换为我可以传递给的数组（称为：selectedTemplatesIds） onOnboardingComplete（按钮）。

使用 id 作为标识符，并以此为基础，我们得到一组选定的卡片，并通过 onOnboardingComplete 传递它。

我听说我可以使用 Object.keys，但以前从未这样做过。我该怎么做？

总结：

1.我希望能够在选中时获取我的卡唯一 ID，并在未选中时忽略它们

2。一旦我选择了一个或多个，将这些 id 转换为一个数组（selectedTemplatesIds），以便将它们传递给 onOnboardingComplete（TemplateList 中的按钮）。

这是我在 LandingPage 中使用的数组

    templates = [
        {
            title: "Grocery List",
            description: "Description of what this things does so the reader can have info of",
            imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753993/groceries.png",
            id: 0,
        },

        {
            title: "Shopping Space",
            description: "blablabalblabla",
            imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753766/shopping.png",
            id: 1,
        },

        {
            title: "Travel Planning",
            description: "blablabalblabla",
            imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753885/travel.png",
            id: 2,
        },

        {
            title: "Travel",
            description: "blablabalblabla",
            imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753993/groceries.png",
            id: 3,
        },
    ];

我的模板列表组件：

export type Template = {
    title: string;
    description: string;
    imgURL: string;
    id?: number;
};

type Props = {
    templates: Template[];
    onOnboardingComplete: Function;
};

const TemplateList = ({ templates, onOnboardingComplete }: Props) => {
    const { aspectRatio, vmin } = useWindowResponsiveValues();

    const [noOfSelectedCards, setNoOfSelectedCards] = useState(0);

    const handleSelect = () => setNoOfSelectedCards(noOfSelectedCards + 1);
    const handleDeselect = () => setNoOfSelectedCards(noOfSelectedCards - 1);

    let buttonText;
    if (noOfSelectedCards === 1) {
        buttonText = "Select at least 1 more option";
    } else if (noOfSelectedCards >= 2) {
        buttonText = "Create my initial cuadds!";
    } else {
        buttonText = "Select at least 2 options";
    }

    return (
        <>
            <div className={styles.scrollContainer}>
                {templates.map((item) => (
                    <TemplateCard
                        title={item.title}
                        description={item.description}
                        img={item.imgURL}
                        classNameToAdd={styles.cardContainer}
                        key={item.id}
                        onSelectCard={handleSelect}
                        onDeselectCard={handleDeselect}
                    />
                ))}
            </div>
            <MenuButton
                onClick={onOnboardingComplete}
                style={actionButton}
                className={
                    noOfSelectedCards >= 2 ? `${styles.actionBlue}` : `${styles.actionNormal}`
                }
            >
                {buttonText}
            </MenuButton>
        </>
    );
};

export default TemplateList;

还有我的模板卡片：

type Props = {
    title: string;
    description: string;
    img: string;
    classNameToAdd?: string;
    classNameOnSelected?: string;
    onSelectCard: any;
    onDeselectCard: any;
};

const TemplateCard = ({
    title,
    description,
    img,
    classNameToAdd,
    classNameOnSelected,
    onSelectCard,
    onDeselectCard,
}: Props) => {
    const { aspectRatio, vmin } = useWindowResponsiveValues();
    let className = `${styles.card} ${classNameToAdd}`;

    const [selected, setSelected] = useState(false);

    const handleClick = () => {
        setSelected(!selected);
        if (selected) {
            onDeselectCard();
        } else {
            onSelectCard();
        }
    };

    if (selected) {
        className += `${styles.card} ${classNameToAdd} ${classNameOnSelected}`;
    }



    return (
        <div style={card} className={className} onClick={handleClick}>
            <img style={imageSize} src={img}></img>
            <div style={cardTitle}>
                {title}
                {selected ? <BlueCheckIcon style={blueCheck} className={styles.blueCheck} /> : null}
            </div>
            <div style={descriptionCard}>{description}</div>
        </div>
    );
};

TemplateCard.defaultProps = {
    classNameOnSelected: styles.selected,
};

export default TemplateCard;

Answer 1

而不仅仅是存储 noOfSelectedCards。只需存储 id 数组即可：

const [selectedIds, setSelectedIds] = useState([]);

将 id 发送到 handleSelect 函数中，并将 id 推送到数组中。

<TemplateCard
    title={item.title}
    description={item.description}
    img={item.imgURL}
    classNameToAdd={styles.cardContainer}
    key={item.id}
    onSelectCard={() => handleSelect(item.id)}
    onDeselectCard={handleDeselect}
/>

handleSelect(id) {
    setSelectedIds(prev => [...prev, id])
}

您可以在取消选择卡片时执行类似的操作来删除 id。

Answer 2

添加：

const selectedTemplatesIds = [];

更改处理程序：

const handleSelect = (id) => {
  selectedTemplatesIds.push(id);
  setNoOfSelectedCards(noOfSelectedCards + 1);
};
const handleDeselect = (id) => {
  selectedTemplatesIds.splice(selectedTemplatesIds.indexOf(id),1);
  setNoOfSelectedCards(noOfSelectedCards - 1);
  
}

变化：

<TemplateCard
                    title={item.title}
                    description={item.description}
                    img={item.imgURL}
                    classNameToAdd={styles.cardContainer}
                    key={item.id}
                    onSelectCard={() => {
                                        handleSelect(item.id)
                                  }}
                    onDeselectCard={() => {
                                        handleDeselect(item.id)
                                  }}
                />