Reactjs：使用状态挂钩单击时如何选择一张或多张卡片？

Question

我有一个卡片组件 TemplateList 用于映射我的模板卡片（我通过数组添加它们）。

我想添加一个 onClick 状态挂钩功能，帮助我在点击时选择一张或多张卡片，我该怎么做？

这是我的 TemplateList 组件：

import TemplateCard from 
import styles from "./styles/actionpage.m.css";

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

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

const TemplateList = ({ templates }: Props) => {
    return (
        <div className={styles.scrollContainer}>
            {templates.map((item) => (
                <TemplateCard
                    title={item.title}
                    description={item.description}
                    img={item.imgURL}
                    classNameToAdd={styles.cardContainer}
                />
            ))}
        </div>
    );
};

export default TemplateList;

这是我的 TemplateCard 组件：

import React from "react";
import styles from "./styles/cards.m.css";

type Props = {
    title: string;
    description: string;
    img: string;
    classNameToAdd?: string;
    selected?: boolean;
    classNameOnSelected?: string;
};

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

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

    return (
        <div style={card} className={className}>
            <img style={imageSize} src={img}></img>
            <div style={cardTitle}>{title}</div>
            <div style={descriptionCard}>{description}</div>
        </div>
    );
};

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

export default TemplateCard;

目前，我添加了一个“已选择”道具，在为真时为我的卡片提供边框，但这当然会在为真时选择所有卡片。

这就是我的卡片在被选中时的样子。

Answer 1

要解决这个问题，您必须为每张卡设置自己的状态； selected。 这样每张卡片都会有自己的小逻辑，通过这些逻辑他们可以知道自己是否被选中。

// TemplateCard.js
...

const TemplateCard = ({
    title,
    description,
    img,
    classNameToAdd,
    classNameOnSelected,
    /* selected,  we will make this a state instead of prop */
}: Props) => {
    const { aspectRatio, vmin } = useWindowResponsiveValues();

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

    // Added handler
    const handleClick = () => {
      setSelected(!selected);
    };

    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}</div>
            <div style={descriptionCard}>{description}</div>
        </div>
    );
};
...

Answer 2

在您的 TemplateCard 组件上添加一个 onClick 处理程序并在主 div 上触发它。此外，您需要为您的个人卡提供一些标识，以便我们可以使用其来源的数组索引。

像这样：

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

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

    return (
        <div style={card} className={className} onClick={()=>handleClick(index)}>
            <img style={imageSize} src={img}></img>
            <div style={cardTitle}>{title}</div>
            <div style={descriptionCard}>{description}</div>
        </div>
    );
};

在您的 TemplateList 组件中，您需要设置一个索引数组（使用 useState）来存储单击的 TemplateCards 的索引，以便您可以检查选择了哪些卡，哪些没有。并使用我们传递给子组件的函数设置状态，即handleClick

像这样：

const [selectedArray,setSelectedArray]=useState([])

const handleClick=(i)=>{
const tempArray =[...selectedArray]
if(tempArray[i]==i){tempArray[i]=undefined}
else {tempArray[i]=i}

setSelectedArray(tempArray)
}

组件将是这样的：

const TemplateList = ({ templates }: Props) => {
    return (
        <div className={styles.scrollContainer}>
            {templates.map((item,index) => (
                <TemplateCard
                    title={item.title}
                    description={item.description}
                    img={item.imgURL}
                    classNameToAdd={styles.cardContainer}
                    index={index}
                    selected={selectedArray[index]==index? true:false}
                    handleClick={handleClick}
                />
            ))}
        </div>
    );
};

现在这里发生的情况是，我们使用索引作为标识符，并基于此设置选定卡片的数组。在此基础上，我们将 'selected' 属性发送到 Card 组件。在那里，您可以根据该道具应用您的样式。

希望您的问题得到解答！