当单击按钮时，如何使用e.target向各个元素添加样式？

Question

我正在尝试添加样式到独立元素中。我希望当一个单独的div(被单击以确保特定段落从dislay: to到dislay:block )发生更改时。但问题是，当我只点击一个，所有的段落文本都会显示出来。下面是css：

.cards{
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
}

[class*=cardDisplay]{
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    background: black; 
    color: white;
    margin: auto;
}

[class*=card-content]{
    display: none;
}

[class*=card-content-2]{
    display: block;
}

和react.js文件：

import React from 'react';
import {useState} from "react";
import "./game.css";

function Game() {
    const [styling, setStyling] = useState("card-content")

    const handleClick = () => {
        setStyling("card-content-2")
    }

  return (
      <div className="cards">
          <div className="cardDisplay card-1" onClick={handleClick}>
              <p className={styling}>Win</p>
          </div>
          <div className="cardDisplay card-2" onClick={handleClick}>
              <p className={styling}>Sorry, No Win</p>
          </div>
          <div className="cardDisplay card-3" >
              <p className={styling} onClick={handleClick}>Sorry, No Win</p>
          </div>
      </div>
  )
}

Answer 1

您只使用适用于所有段落的one styling。如果您希望对每个段落进行不同的样式设置，则必须对每个段落分别保持该状态。

以下任一项：

1. 使div+paragraph成为一个保持自己状态的组件，即

1. 有多个styling状态成员(可能是一个数组)。

我倾向于第一个：

function Card({className = "", children}) {
    const [styling, setStyling] = useState("card-content");

    const handleClick = () => {
        setStyling("card-content-2")
    };

    return (
        <div className={`cardDisplay ${className}`} onClick={handleClick}>
            <p className={styling}>{children}</p>
        </div>
    );
};

function Game() {
    return (
        <div className="cards">
            <Card className="card-1">Win</Card>
            <Card className="card-2">Sorry, No Win</Card>
            <Card className="card-3">Sorry, No Win</Card>
        </div>
    );
}

有很多方法可以旋转，但这是基本的想法。

但是还存在这样一个论点，即卡片是一个带有状态的对象数组；下面是一个例子，在组件首次挂载时，结果是随机的：

function makeCards() {
    const num = 3;
    const win = Math.floor(Math.random() * num);
    return Array.from({length: 3}, (_, index) => ({
        id: `card-${index}`,
        result: index === win ? "Win" : "Sorry, No Win",
        showing: false,
    }));
}

function Game() {
    const [cards, setCards] = useState(makeCards);
    const handleClick = (event) => {
        const id = event.currentTarget.getAttribute("data-id");
        setCards(prevCards => {
            const newCards = prevCards.map(card => {
                if (card.id === id) {
                    return {...card, showing: true};
                }
                return card;
            });
            return newCards;
        });
    };
    return (
        <div className="cards">
            {cards.map(({id, result, showing}) => (
                <div key={id} data-id={id} className={`cardDisplay ${id}`} onClick={handleClick}>
                    <p className={showing ? "card-content" : "card-content-2"}>{result}</p>
                </div>
            ))}
        </div>
    );
}

Answer 2

这可能对你有帮助。它真的很管用..。

import React from 'react';
import {useState} from "react";
import "./game.css";

function Game() {
  const handleClick = (e) => {
    e.target.firstChild?.classList?.remove("card-content");
    e.target.firstChild?.classList?.add("card-content-2");
  };

  return (
    <div className="cards">
      <div className="cardDisplay card-1" onClick={handleClick}>
        <p className="card-content">Win</p>
      </div>
      <div className="cardDisplay card-2" onClick={handleClick}>
        <p className="card-content">Sorry, No Win</p>
      </div>
      <div className="cardDisplay card-3" onClick={handleClick}>
        <p className="card-content">Sorry, No Win</p>
      </div>
    </div>
  );
}

Answer 3

您目前正在做的是更改每个p标记的样式。

我将建议您有一个自定义类，它返回包含p标记的div标记。

有一个包含卡样式和将显示的文本的对象数组。通过数组映射并相应地返回样式和标记。如下图所示。

处理自定义div中的单击事件。

import React from 'react';
import "./game.css";
import MyDiv from './MyDiv';


const cards = [{ cardStyle: 'card-1', text: "Win" },
{ cardStyle: 'card-2', text: 'Sorry, No Win' },
{ cardStyle: 'card-3', text: 'Sorry, NoWin' }];


function Game() {
    return (
        <div className="cards">

            {cards.map((card, index) =>
            (<MyDiv cardNumberStyle={card.cardStyle}
                key={index}
               
                textToDisplay={card.text} />))
            }
        </div>
    );
}





export default Game;

然后MyDiv是：

import React, { useState } from "react";

const MyDiv = ({ cardNumberStyle, textToDisplay }) => {
    const [styling, setStyling] = useState('card-content');

    ///Handles clicks
    const handleClick = () => {
        //conditionally change the styling
        if (styling === 'card-content')
            setStyling('card-content-2')
        else setStyling('card-content');

    }

    return (
        <div className={`cardDisplay ${cardNumberStyle}`} onClick={handleClick}>
            <p className={styling}>{textToDisplay}</p>
        </div>
    );
}

export default MyDiv;