如何在 React 中使用 className 切换按钮颜色？

Question

我正在尝试切换带有钩子、类名和 ID 的按钮，但所有按钮都会切换颜色，而不是实际单击的一个按钮。 类名用于切换类名“dark”和 null，其中 .dark 将按钮更改为黑色。

[重复] 我正在尝试使用挂钩、类名和 ID 来切换按钮，但所有按钮都会切换颜色，而不是实际单击的一个按钮。 类名用于切换类名“dark”和 null，其中 .dark 将按钮更改为黑色。

import './Clothing.css'
import data from '../../data/data2.json';

const Clothing = () => {

  const [toggle, setToggle] = useState(null);


  const types = [
    { id: 11, value: 'All' },
    { id: 22, value: 'Cap' },
    { id: 33, value: 'Sweatshirt' },
    { id: 44, value: 'Hoodie' },
    { id: 55, value: 'Shirt' }
  ]

  const handleToggle = (e) => {
    console.log(e.target.id)
    if (types.filter(
      (item) => item.id === e.target.id
    )) return setToggle(!toggle)
  }

        <div className="buttonDiv">
            {
              types.map((t) =>
                <button
                  key={t.id}
                  id={t.id}
                  value={t.value}
                  className={ toggle ? "dark" : null}
                  onClick={(e) => {
                    handleSelectedCategory(e);
                    handleToggle(e);
                  }}>
                  {t.value}
                </button>
              )
            }
          </div>


.clothSection {
    position: absolute;
    top: 25%;
    width: 100%;
    padding: 0 2rem;

    .topMenu {
        display: flex;
        flex-direction: column;
        padding: 2rem 4rem;

        .buttonDiv {
            gap: 2rem;
            display: flex;
            padding: 2rem 0;

            button {
                background-color: var(--InputColor);
                padding: .5rem 1rem;
                border-radius: .5rem;
                font-size: var(--NormalFontSize);
                color: var(--TextColor);
                cursor: pointer;
                border: none;
            }

            .dark {
                background-color: var(--BlackColor);
                color: var(--WhiteColor);
            }

Answer 1

如果我没看错你的意思，你想要你点击的按钮去上黑暗课 第一次改变

handleToggle

：

  const handleToggle = (e) => {
    console.log(e.target.id);
    setToggle(e.target.id);
  };

然后改变你的条件

 className={toggle == t.id ? "dark" : null}

完成

这就是所有代码：

import React, { useState } from "react";

export default function Clothing () {
  const [toggle, setToggle] = useState(null);

  const types = [
    { id: 11, value: "All" },
    { id: 22, value: "Cap" },
    { id: 33, value: "Sweatshirt" },
    { id: 44, value: "Hoodie" },
    { id: 55, value: "Shirt" },
  ];

  const handleToggle = (e) => {
    console.log(e.target.id);
    setToggle(e.target.id);
  };
  return (
    <div>
      <div className="buttonDiv">
        {types.map((t) => (
          <button
            key={t.id}
            id={t.id}
            value={t.value}
            className={toggle == t.id ? "dark" : null}
            onClick={(e) => {
              handleToggle(e);
            }}
          >
            {t.value}
          </button>
        ))}
      </div>
    </div>
  );
}

Answer 2

你好，你应该像这样使用classnames：

classNames({ dark: toggle })