React/Redux 使用狀態更改嵌套數組中按鈕的背景顏色

Question

多年來，我一直在為此撓頭。

我正在嘗試更改嵌套數組中特定按鈕的背景顏色。

我有一個成對的名字數組，我使用地圖循環了兩次，一次是為了得到一對，再次是為了得到值。 我輸出並將值分配給每個按鈕，並將這些對顯示在一起（例如，每對索引為 0 和 1）。

當我單擊按鈕時，我只想更改所選按鈕的背景顏色。 目前所有按鈕都會改變顏色。 問題是當我使用布爾值來定義選擇時，按鈕的狀態會影響所有按鈕。

我用來執行此操作的處理程序還將按鈕的值添加到稍后傳遞到全局狀態的數組中。

對此的任何幫助將不勝感激，因為我似乎無法找到解決方法。 謝謝！

import React, { Component } from "react";
import "../../App.scss";
import { Link } from "react-router-dom";
import Button from "../Button/Button";

class Matches extends Component {
  constructor(props) {
    super(props);
    this.state = {
      champ: [],
      winningPlayers: [],
      selected: false,
    };
    this.handleAddWinners = this.handleAddWinners.bind(this);
    this.handleRound = this.handleRound.bind(this);
  }

  // Adds winners to a local array which is then sent
  // to the global array using the handleNextRound action.

  handleAddWinners = (e) => {
    const winner = e.target.value;
    const { champ } = this.state;
    const { round } = this.props;

    if (round !== 3) {
      this.setState({
        selected: !false,
        winningPlayers: [...this.state.winningPlayers, winner],
      });
    } else {
      this.setState({ champ: [...champ, winner] });
    }
  };

  handleRound = () => {
    const { round, handleNextRound, handleChampion } = this.props;

    round !== 3 ? handleNextRound(this.state) : handleChampion(this.state);

    this.setState({ winningPlayers: [] });
  };

  render() {
    const { pairs, round, handleClear, roundWinners, champion } = this.props;
    const { winningPlayers, selected, champ } = this.state;
    const semi = roundWinners[0];
    const final = roundWinners[1];
    const champName = champion.map((item) => item);
    const reset =
      round !== 4 ? "block__reset__tournament" : "block__reset__new-game";
    const newGame = `${round !== 4 ? "Reset" : "New Game?"}`;
    const buttonClick = `${selected ? "selected" : "block__player"}`;
   

    return (
      <>
        <div classname="container__wrapper">
          <div className="container__tournament">
            {round === 1 ? (
              <section className="block__round ">
                {pairs.map((item, index) => (
                  <div className="pairs" key={index}>
                    {item.map((names, index) => (
                      <Button
                        key={index}
                        handleClick={(e) => this.handleAddWinners(e)}
                        label={names}
                        buttonClass={buttonClick}
                        value={names}
                      />
                    ))}
                  </div>
                ))}
              </section>
            ) : round === 2 ? (
              <section className="block__round ">
                {semi.map((names, index) => (
                  <div className="pairs" key={index}>
                    {names.map((names, index) => (
                      <Button
                        key={index}
                        handleClick={(e) => this.handleAddWinners(e, "value")}
                        label={names}
                        buttonClass={buttonClick}
                        value={names}
                      />
                    ))}
                  </div>
                ))}
              </section>
            ) : round === 3 ? (
              <section className="block__round ">
                {final.map((names, index) => (
                  <div className="pairs" key={index}>
                    {names.map((names, index) => (
                      <Button
                        key={index}
                        handleClick={(e) => this.handleAddWinners(e, "value")}
                        label={names}
                        buttonClass={buttonClick}
                        value={names}
                      />
                    ))}
                  </div>
                ))}
              </section>
            ) : (
              <section className="block__champion">
                <p className="champion__greeting">
                  Congratulations&nbsp;
                  <br />
                  <span className="champion__name">{champName}!</span>
                  <br /> You've won the whole shebang!
                </p>
              </section>
            )}

            <Button
              buttonClass={`${
                round !== 4 ? "block__next-round" : "button__notActive"
              }`}
              label={`${round !== 3 ? "Next Round" : "See Winner"}`}
              handleClick={this.handleRound}
              disabled={disabled}
            />

            <Link to={"/"} className={reset}>
              <Button
                buttonClass={reset}
                handleClick={handleClear}
                label={newGame}
              />
            </Link>
          </div>
        </div>
      </>
    );
  }
}

export default Matches;

這是處理大部分內容的組件。

Answer 1

首先，我想說您應該始終避免使用數組的索引作為鍵。 也就是說，除非您的數組始終具有相同的大小和順序。 話雖如此 - 您想要做的是知道選擇了哪個按鈕 - 對嗎？ 所以你需要存儲最后一個被選中的按鈕。 因為您沒有在任何地方使用任何 id，所以您可以使用該對的索引和按鈕的索引來知道點擊了哪個按鈕。 這是一個示例 - 我只更改了 round1 和狀態代碼。

import React, { Component } from "react";
import "../../App.scss";
import { Link } from "react-router-dom";
import Button from "../Button/Button";

class Matches extends Component {
  constructor(props) {
    super(props);
    this.state = {
      champ: [],
      winningPlayers: [],
      selected: null,
    };
    this.handleAddWinners = this.handleAddWinners.bind(this);
    this.handleRound = this.handleRound.bind(this);
  }

  // Adds winners to a local array which is then sent
  // to the global array using the handleNextRound action.

  handleAddWinners = (e, pairIndex, itemIndex) => {
    const winner = e.target.value;
    const { champ } = this.state;
    const { round } = this.props;

    if (round !== 3) {
      this.setState({
        selected: `${pairIndex}-${itemIndex}`,
        winningPlayers: [...this.state.winningPlayers, winner],
      });
    } else {
      this.setState({ champ: [...champ, winner] });
    }
  };

  handleRound = () => {
    const { round, handleNextRound, handleChampion } = this.props;

    round !== 3 ? handleNextRound(this.state) : handleChampion(this.state);

    this.setState({ winningPlayers: [] });
  };

  render() {
    const { pairs, round, handleClear, roundWinners, champion } = this.props;
    const { winningPlayers, selected, champ } = this.state;
    const semi = roundWinners[0];
    const final = roundWinners[1];
    const champName = champion.map((item) => item);
    const reset =
      round !== 4 ? "block__reset__tournament" : "block__reset__new-game";
    const newGame = `${round !== 4 ? "Reset" : "New Game?"}`;
    const buttonClick = `${selected ? "selected" : "block__player"}`;
   

    return (
      <>
        <div classname="container__wrapper">
          <div className="container__tournament">
            {round === 1 ? (
              <section className="block__round ">
                {pairs.map((item, pairIndex) => (
                  <div className="pairs" key={pairIndex}>
                    {item.map((names, itemIndex) => (
                      <Button
                        key={itemIndex}
                        handleClick={(e) => this.handleAddWinners(e, pairIndex, itemIndex)}
                        label={names}
                        buttonClass={`${pairIndex}-${itemIndex}` === selected ? '<enterYourBackgroundClass' : buttonClick}
                        value={names}
                      />
                    ))}
                  </div>
                ))}
              </section>
            ) : round === 2 ? (
              <section className="block__round ">
                {semi.map((names, index) => (
                  <div className="pairs" key={index}>
                    {names.map((names, index) => (
                      <Button
                        key={index}
                        handleClick={(e) => this.handleAddWinners(e, "value")}
                        label={names}
                        buttonClass={buttonClick}
                        value={names}
                      />
                    ))}
                  </div>
                ))}
              </section>
            ) : round === 3 ? (
              <section className="block__round ">
                {final.map((names, index) => (
                  <div className="pairs" key={index}>
                    {names.map((names, index) => (
                      <Button
                        key={index}
                        handleClick={(e) => this.handleAddWinners(e, "value")}
                        label={names}
                        buttonClass={buttonClick}
                        value={names}
                      />
                    ))}
                  </div>
                ))}
              </section>
            ) : (
              <section className="block__champion">
                <p className="champion__greeting">
                  Congratulations&nbsp;
                  <br />
                  <span className="champion__name">{champName}!</span>
                  <br /> You've won the whole shebang!
                </p>
              </section>
            )}

            <Button
              buttonClass={`${
                round !== 4 ? "block__next-round" : "button__notActive"
              }`}
              label={`${round !== 3 ? "Next Round" : "See Winner"}`}
              handleClick={this.handleRound}
              disabled={disabled}
            />

            <Link to={"/"} className={reset}>
              <Button
                buttonClass={reset}
                handleClick={handleClear}
                label={newGame}
              />
            </Link>
          </div>
        </div>
      </>
    );
  }
}

export default Matches;