如何在 React 中为单击的按钮添加类并将类删除到先前单击的按钮

Question

我在网站的左侧有一个按钮列表（该列表可以通过添加条目变大或通过删除它们变小），当我单击一个按钮时，我想显示存储在特定按钮中的内容网站右侧。

现在，我可以为按钮添加一个活动类。因此，当我单击按钮时，将显示其内容。但是我想一次只显示一个内容，而无需再次单击相同的按钮来删除该类。就像，当我单击另一个按钮时，前一个单击的类将被删除并添加到实际单击的类中。如何解决这个问题？

另外，我希望内容显示在同一个地方。现在，内容从相关按钮的高度开始。我不想使用框架。我找到了几个示例，但每个示例都包含硬编码的按钮/内容。

感谢您的回答。

这里是按钮的组件：

import React, { useState } from "react";
import Entrie from "./Entrie";

const EntrieButton = ({ entrie, handleEditClick, handleDeleteClick }) => {
  const [active, setActive] = useState(false);

  const handleSetActive = (e) => {
    setActive(!active);
  };

  return (
    <div className="w-full bg-blue-300">
      <button
        key={entrie.id}
        className="my-2 ml-2 rounded-sm shadow-sm overflow-hidden w-1/4"
        onClick={handleSetActive}
      >
        <div className="flex justify-between w-full overflow-hidden">
          <p className="bg-purple-300 w-1/4 px-2 py-4">{entrie.date}</p>
          <p className="bg-yellow-300 w-3/4 px-2 py-4">{entrie.heading}</p>
        </div>
      </button>
      <Entrie
        entrie={entrie}
        onEditClick={handleEditClick}
        onDeleteClick={handleDeleteClick}
        active={active}
      />
    </div>
  );
};

export default EntrieButton;

如果您需要存储内容的 Entrie 组件：

import React from "react";

const Entrie = ({ entrie, onEditClick, onDeleteClick, active }) => {
  return (
    <div
      className={`container w-2/3 bg-white float-right h-full px-14 py-2 mt-2 mr-2" ${
        active ? "block" : "hidden"
      }`}
    >
      <p className="">{entrie.date}</p>
      <h2 className="text-2xl">{entrie.heading}</h2>
      <p>{entrie.mood}</p>
      <p>{entrie.text}</p>
      <div className="w-full flex justify-around py-8 border-t-2">
        <button onClick={() => onEditClick(entrie)} className="">
          <abbr title="Edit">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              width="20px"
            >
              <path d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z" />
            </svg>
          </abbr>
        </button>
        <button onClick={() => onDeleteClick(entrie.id)} className="">
          <abbr title="Delete">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              width="20px"
            >
              <path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z" />
            </svg>
          </abbr>
        </button>
      </div>
    </div>
  );
};

export default Entrie;

这是我使用地图功能渲染按钮的组件

import React from "react";
import EntrieButton from "./EntrieButton";

const EntrieList = ({ entries, handleEditClick, handleDeleteClick }) => {
  const entrieCount = entries.length;

  return (
    <div className="container">
      <h2>
        You have {entrieCount} {entrieCount === 1 ? `entrie` : `entries`} so
        far.
      </h2>
      <div className="h-screen overflow-auto bg-gray-100 mb-6 w-full">
        {entries.map((entrie) => (
          <EntrieButton
            key={entrie.id}
            entrie={entrie}
            handleEditClick={handleEditClick}
            handleDeleteClick={handleDeleteClick}
          />
        ))}
      </div>
    </div>
  );
};

export default EntrieList;

Answer 1

根据您的问题，我假设将有一组按钮和相关内容，如下所示，并使用map() 函数呈现按钮列表。

[{button: btn1, content: content1}, {button: btn2, content: content2}]

在此数组中，您可以包含一个额外的参数，例如 isActive: true/false，并使用函数更新此数组，并将该函数引用传递给子组件并在单击按钮时调用它。