Javascript 仅针对映射组件上单击的项目（React Quike trivia App）

我正在尝试使用开放的琐事Api开发一个带有React的应用程序。我已经映射了一个按钮组件（使用材质ui）来显示每个问题的不同答案。我现在正努力只针对点击的一个应用css属性：如果答案正确，应该变成绿色，否则变成红色。问题是，一旦我点击，所有按钮都会变成红色或绿色。我试图将索引存储在一个状态中，并比较实际索引，但它不起作用。这是我的密码： 在主APP.js中

  const [clickedOne, setClickedOne] = useState({
    clickedIndex: null,
  });

  useEffect(() => {
    grabData();
  }, []);

  const handleClick = (choice, ke) => {
    setChoice(choice);

    if (choice === data.correct_answer) {
      setIsCorrect(true);
    } else {
      setIsCorrect(false);
    }
    setClickedOne({ clickedIndex: ke });

    grabData();
  };

渲染中的贴图按钮：

      {answers.map((answer, index) => {
          return (
            <ContainedButtons
              choice={handleClick}
              answer={answer}
              correct={data.correct_answer}
              isCorrect={isCorrect}
              key={index}
              id={index}
              clicked={clickedOne}
            />
          );
        })}

{answers.map（（答案，索引）=>{
返回(
);
})}

在按钮组件内部：

const backStyle = () => {
    if (clicked === id) {
      if (isCorrect) {
        return "green";
      } else if (isCorrect === false) {
        return "red";
      } else {
        return null;
      }
    }
  };

  return (
    <div className={classes.root}>
      <Button
        style={{ backgroundColor: backStyle() }}
        value={answer}
        onClick={() => choice(answer, id)}
        variant="contained"
      >
        {decodeURIComponent(answer)}
      </Button>

const backStyle=（）=>{
如果（单击===id）{
如果（不正确）{
返回“绿色”；
}else if（isCorrect==false）{
返回“红色”；
}否则{
返回null；
}
}
};
返回(
选择（答案，id）}
variant=“包含”
>
{解码组件（应答）}

当我现在在backstyle函数中检查单击的===id时，现在什么也不会发生。如果没有这个if检查，我会让所有按钮都变成红色或绿色。

---

谢谢你们的帮助！

我已经看过你们的codesandbox演示，除了你们的问题之外，还有很多其他问题

首先，每次向API请求获取下一个问题时，您都会请求获取10个问题，而不是1个问题。API请求URL包含一个名为

amount

的查询参数，该参数确定每个请求将获取多少问题。将其值更改为1

"https://opentdb.com/api.php?amount=1&encode=url3986"

其次，有很多不必要的代码和不必要的使用

useState

hook。你只需要在状态中存储两件东西，

data

和

answers

const [data, setData] = useState({});
const [answers, setAnswers] = useState([]);

现在，我们来讨论检测单击了哪个按钮并正确更新其背景颜色的原始问题

要实现所需的功能，请采取以下步骤：

创建两个CSS类，如下所示

button.bgGreen {
  background-color: green !important;
}

button.bgRed {
  background-color: red  !important;
}

将

handleClick

函数从

App

组件传递到

ContainedButtons

组件。单击按钮时，将调用此单击处理程序。在

handleClick

函数中，使用

Event.target

获取文本和单击的按钮，具体取决于用户是否回答了c不管正确与否，在单击的按钮上添加在步骤1中创建的相应CSS类

在

map

函数中，不要使用

index

作为

ContainedButtons

的键，而是使用每次都是唯一的东西。这是必需的，因为我们希望React不要重复使用

ContainedButtons

，因为如果React重复使用

ContainedButtons

组件，那么在步骤2中添加的CSS类就可以了将不会从按钮上删除

下面是您的应用程序与上述步骤的工作

---

在这个演示中，我删除了不必要的代码，并将

ContainedButtons

内部

map

函数的

键更改为
key={answer.length*Math.random（）*100}
。您可以将其更改为任何可确保此键每次都是唯一的键。
当您执行任何操作（如单击/检查等）时，React会为您提供一个事件对象。在这种情况下，您将获得currentTarget。那么，当您可以直接获得currentTarget并仅在答案正确时进行检查时，为什么要与index进行比较呢对该按钮应用样式。希望有帮助！！我认为react不喜欢使用事件属性，这就是我将单击的答案作为参数传递的原因。不。react喜欢玩事件，我的意思是，这就是为什么他们创建了一个合成事件包装器来给我们提供信息。如果使用事件，没有编译器会抱怨。这对你来说会更容易o获取目标并重新绘制。您可以在React docs中阅读有关合成事件的更多信息。干杯！！谢谢！这样我就可以比较if（clicked=e.target.id）？准确地说是@Robozombie。更新投票答案，以便将来对其他人有所帮助。谢谢。但我如何检查所记录的事件是否具有与父事件相同的索引？这就是我不想使用的原因Event@Robozombie你能为你的应用创建一个代码沙盒演示并分享链接吗？