單擊按鈕時，如何使用 e.target 將 styles 添加到單個元素中？

Question

我正在嘗試將 styles 添加到各個元素中。 我希望單擊單個 div( 以確保特定段落從 display: none 更改為 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

您只使用了一種應用於所有段落的styling 。 如果您希望每個段落都有不同的樣式，則必須為每個段落分別保存 state。

任何一個：

1. 使div + paragraph成為擁有自己的 state 的組件，或者

2. 具有多個styling state 成員（可能是一個數組）。

我會傾向於第一個：

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>
    );
}

有很多方法可以旋轉它，但這是基本的想法。

但也有人認為卡片是一個對象數組，其中包含 state； 這是一個示例，在首次安裝組件時結果隨機化：

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 標簽的樣式。

我會建議你有一個自定義 class 返回包含 p 標簽的 div 標簽

有一個包含卡片樣式和將要顯示的文本的對象數組。 Map 通過數組並返回相應的樣式和標簽。 如下圖所示。

處理自定義 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;