Javascript 反应-计数复选框

我的React组件中的一些复选框出现问题：

我遇到的问题是，当检查两个正确答案时，分数没有正确反映。我正在尝试设置它，以便在检查正确答案时，分数增加一分。如果未选中正确答案，则应删除该增加。如果检查了错误答案，则不应增加或减少任何分数。然而，在这里的第一个问题上，当我检查一个正确答案时，分数会增加，但当我检查第二个正确答案时，分数会降低

---

如果有任何意见，将不胜感激

我认为你可能处理错了国家。您要做的是设置静态项并单击检查它们是否正确，但如果不正确则不检查。这样一来，问题就出现了：

你没有跟踪什么是被检查的，什么是未被检查的

您没有跟踪错误的答案，只有在单击答案时

您可以改为在回答选项中设置复选框：

应答选项：[
{回答文字：“纽约”，isCorrect:false，checked:false}，
{回答文字：“伦敦”，isCorrect:false，checked:false}，
{回答文字：“巴黎”，isCorrect:true，checked:false}，
{回答文字：“都柏林”，isCorrect:true，checked:false}
]

然后，在handleChange中，传递该项并将选中的值更改为true

之后，您只需更新分数：

setScore(score.filter(a => a.isCorrect && a.checked).length)

请注意，这不会删除错误答案的分数，但您也可以通过这种方式获得该分数

setScore(answers.filter(a => a.isCorrect && a.checked).length - answers.filter(a => !a.isCorrect && a.checked).length)

并为当前问题的答案设置答案

编辑

---

忘记提到最后一部分的答案。

您应该在整个测验过程中使用

useState

跟踪

选中的
答案。
为了做到这一点，我将所有问题移动到
useState
中，并为每个
checked:false
添加了一个新属性

const [questions, setQuestions] = useState(initialQuestions);

要管理用户单击，您有一个功能
handleAnswerOptionClick
。此函数的主要优点是，只有单击的答案才应选中它的状态（
选中：！previousCheckedValue
）。对于类型为
的问题，当用户单击一个问题时，将自动取消选中所有其他问题

const handleAnswerOptionClick = (e, questionId) => {
const answerTextValue = e.target.value;
const updatedQuestions = questions.map((question) => {
  if (question.id === questionId) {
    const updatedAnswersOptions = question.answerOptions.map((answer) => {
      if (answer.answerText === answerTextValue) {
        return { ...answer, checked: !answer.checked };
        } else {
          return question.questionType === "select"
            ? { ...answer, checked: false }
            : answer;
        }
      });
      return { ...question, answerOptions: updatedAnswersOptions };
      } else {
       return question;
      }
    });
    setQuestions(updatedQuestions);
  };

除了管理
checked
状态外，您还可以包括
usemo
钩子来计算所有问题中正确答案的数量。请注意，如果答案为某个问题选择了多个正确答案，则分数将增加多个正确答案

    const score = useMemo(() => {
    return questions.reduce((acc, q) => {
      const correctAnswerSelected = q.answerOptions.reduce((acc, answer) => {
        if (answer.checked && answer.isCorrect) {
          acc = acc + 1;
        }
        return acc;
      }, 0);
      acc = acc + correctAnswerSelected;

      return acc;
    }, 0);
  }, [questions]);

这是工作代码沙盒：
谢谢Alex，这真的很有帮助。您能再解释一下如何更新handleChange吗？首先，您的checked值应该设置为您answerOption的checked属性。第二，在你的handleChange中，你应该更新状态，以反映答案现在已被检查。第三，你现在更新分数，这也是我不真正使用挂钩的原因，因为你的问题不能更新，因为它们是道具，因此是不变的。你也应该考虑让他们在州，所以他们可以被更新，谢谢你的帮助。唯一的问题是，在问题1中，如果选择了两个正确答案，则分数只显示“1”，您希望它计为2？是的，我希望它计为2。我编辑了一个答案，更改在
usemo
中。祝你好运：）我看到了更新后的沙盒，它现在可以工作了。非常感谢你！