Javascript React/Redux使用状态更改嵌套数组中按钮的背景颜色

我已经为这个挠头很久了

我正在尝试更改嵌套数组中特定按钮的背景颜色。

我有一个成对的名称数组，我使用一个映射循环两次，一次获取成对名称，一次获取值。我为每个按钮输出并分配值，并将这些对显示在一起（例如，每个对的索引为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;

import React，{Component}来自“React”；
导入“../../App.scss”；
从“react router dom”导入{Link}；
从“./按钮/按钮”导入按钮；
类匹配扩展组件{
建造师（道具）{
超级（道具）；
此.state={
冠军：[]，
赢家：[]，
选择：false，
};
this.handleAddWinners=this.handleAddWinners.bind（this）；
this.handleRound=this.handleRound.bind（this）；
}
//将赢家添加到本地阵列，然后发送该阵列
//使用handleNextRound操作创建全局数组。
HandLeadWinners=（e）=>{
const winner=e.target.value；
const{champ}=this.state；
const{round}=this.props；
如果（四舍五入！==3）{
这是我的国家({
已选择：！false，
winningPlayers:[…this.state.winningPlayers，winner]，
});
}否则{
这个.setState（{champ:[…champ，winner]}）；
}
};
handleRound=（）=>{
const{round，handleNextRound，handleChampion}=this.props；
回合！==3？HandlenExround（本州）：handleChampion（本州）；
this.setState（{winningPlayers:[]}）；
};
render（）{
const{pairs，round，handleClear，roundWinners，champion}=this.props；
const{winningPlayers，selected，champ}=this.state；
const-semi=roundWinners[0]；
const final=四轮冠军[1]；
const champName=champion.map（（项目）=>项目）；
常数重置=
回合！==4？“拦网重置比赛”：“拦网重置新游戏”；
const newGame=`${round！==4？“重置”：“新游戏？”}`；
const buttonClick=`${selected？“selected”：“block_uuplayer”}`；
返回(
{round==1(
{pairs.map（（项目，索引）=>(
{item.map（（名称、索引）=>(
这个.handleAddWinners（e）}
label={names}
buttonClass={buttonClick}
值={names}
/>
))}
))}
)：round==2(
{semi.map（（名称、索引）=>(
{names.map（（名称，索引）=>(
this.handleAddWinners（e，“value”）}
label={names}
buttonClass={buttonClick}
值={names}
/>
))}
))}
)：round==3(
{final.map（（名称、索引）=>(
{names.map（（名称，索引）=>(
this.handleAddWinners（e，“value”）}
label={names}
buttonClass={buttonClick}
值={names}
/>
))}
))}
) : (

祝贺


{champName}！

你赢得了整个谢邦！

)}
);
}
}
导出默认匹配项；

---

这是处理大部分问题的组件。

首先，我想说的是，您应该始终避免使用数组的索引作为键。也就是说，除非数组的大小和顺序始终相同。 话虽如此，您想做的是知道选择了哪个按钮，对吗？ 因此，您需要存储最后选择的按钮。因为您在任何地方都不使用任何ID，所以可以使用对的索引和按钮的索引来知道单击了哪个按钮。 这里有一个例子——我只更改了round1和state代码

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;

import React，{Component}来自“React”；
导入“../../App.scss”；
从“react router dom”导入{Link}；
从“./按钮/按钮”导入按钮；
类匹配扩展组件{
建造师（道具）{
超级（道具）；
此.state={
冠军：[]，
赢家：[]，
选中：空，
};
this.handleAddWinners=this.handleAddWinners.bind（this）；
this.handleRound=this.handleRound.bind（this）；
}
//将赢家添加到本地阵列，然后发送该阵列
//使用handleNextRound操作创建全局数组。
HandLeadWinners=（e、pairIndex、itemIndex）=>{
const winner=e.target.value；
const{champ}=this.state；
const{round}=this.props；
如果（四舍五入！==3）{
这是我的国家({
所选：`${pairIndex}-${itemIndex}`，
winningPlayers:[…this.state.winningPlayers，winner]，
});
}否则{
这个.setState（{champ:[…champ，winner]}）；
}
};
handleRound=（）=>{
const{round，handleNextRound，handleC