javascript 在贴图阵列样式构件中单独设置图元样式

bn31dyow 于 2022-12-21 发布在 Java

关注(0)|答案(1)|浏览(123)

我有4个按钮，每个按钮都有自己的正确性检查对象prop -isAnswerCorrect。
我还有isCorrect状态，每当按钮正确或不正确时，我都会更改它。
我想达到什么目标？

点击正确按钮时，其边框颜色变为绿色，其余不正确按钮边框保持不变
点击不正确按钮时，所有不正确按钮的边框颜色均变为红色，正确按钮的边框颜色应变为绿色

目前我所拥有的并没有太大的意义，因为不正确的按钮会将所有边框更改为红色，而正确的按钮会将所有边框更改为绿色。这是因为唯一的isCorrect状态。
如何通过造型构件的组合来合理制作？

JavaScript

来源：https://stackoverflow.com/questions/74861125/styling-elements-individually-in-mapped-array-styled-components

1条答案

按热度按时间

eqqqjvef1#

您可以创建一个helper函数来设置isCorrect的值：

function isResponseCorrect(isAnswerCorrect) {
    if(isCorrect === undefined) {
      return;
    }

    if(isCorrect) {
      return isAnswerCorrect ? true : undefined;
    } else {
      return isAnswerCorrect ? true : false;
    }
  }

return (
    <Wrapper>
      {answerOptions.map((answerOption) => (
        <AnswerButton
          isCorrect={isResponseCorrect(answerOption.isAnswerCorrect)}
          key={answerOption.id}
          onClick={
            () => handleAnswerCorrectness(answerOption.isAnswerCorrect) // TODO
          }
        >
          {answerOption.answerText}
        </AnswerButton>
      ))}
    </Wrapper>
  );
}

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 在贴图阵列样式构件中单独设置图元样式

1条答案

相关问题

热门标签

最新问答