如何使用react函数钩子仅钩住被单击以打开的卡片，并将先前单击的卡片重置为返回关闭状态

React函数钩子是React中的一种特殊函数，用于在函数组件中添加状态和其他React功能。要使用React函数钩子仅钩住被单击以打开的卡片，并将先前单击的卡片重置为返回关闭状态，可以使用以下步骤：

首先，创建一个函数组件，用于渲染卡片列表和处理点击事件。可以使用useState钩子来添加状态。

import React, { useState } from 'react';

function CardList() {
  const [selectedCard, setSelectedCard] = useState(null);

  const handleCardClick = (cardId) => {
    if (selectedCard === cardId) {
      setSelectedCard(null); // 如果点击的是已经打开的卡片，则重置为关闭状态
    } else {
      setSelectedCard(cardId); // 否则，设置选中的卡片为被点击的卡片
    }
  };

  return (
    <div>
      {cards.map((card) => (
        <Card
          key={card.id}
          card={card}
          isSelected={selectedCard === card.id}
          onClick={handleCardClick}
        />
      ))}
    </div>
  );
}

创建一个Card组件，用于渲染单个卡片，并将点击事件传递给父组件处理。

function Card({ card, isSelected, onClick }) {
  return (
    <div
      className={`card ${isSelected ? 'selected' : ''}`}
      onClick={() => onClick(card.id)}
    >
      <h3>{card.title}</h3>
      <p>{card.description}</p>
    </div>
  );
}

在父组件中，定义一个卡片列表，并将其传递给CardList组件进行渲染。

const cards = [
  { id: 1, title: 'Card 1', description: 'This is card 1' },
  { id: 2, title: 'Card 2', description: 'This is card 2' },
  { id: 3, title: 'Card 3', description: 'This is card 3' },
];

function App() {
  return <CardList cards={cards} />;
}

这样，当点击卡片时，React函数钩子会更新selectedCard状态，从而重新渲染Card组件。根据isSelected属性，可以为选中的卡片添加特定的样式或效果。

腾讯云相关产品和产品介绍链接地址：