React Quiz应用开发：选中≥4个选项后显示单按钮的实现

简单实现方法 #

1. 调整按钮位置 #

你之前把按钮写在Template组件里，会导致每个题目下方都出现按钮。正确的做法是把按钮放在Page1组件的返回内容里，所有题目列表的最下方，这样只会显示一个全局的按钮。

2. 修正显示条件 #

你的需求是点击次数≥4，所以判断条件要改成count >= 4（之前代码里写的是>=3，不符合要求）。

3. （可选）优化点击计数逻辑 #

现在的代码里，用户重复点击同一题的选项，count也会一直增加。如果想让每个题目只算一次点击（不管用户选多少次），可以在计数前先判断当前题是否已经选过选项。

修改后的关键代码片段 #

调整Page1组件的返回部分 #

export default function Page1(props) {
  // ... 其他代码不变 ...

  const newQuizData = quizData.map((question) => {
    return (
      <Template
        key={question.id}
        id={question.id}
        question={question.question}
        answers={question.answers}
        handleSelect={handleSelect}
        // 删掉count传递，Template不再需要它
        // count={count}
      />
    );
  });

  // 修改return，把按钮放在所有题目下方
  return (
    <div>
      {newQuizData}
      {count >= 4 && (
        <button onClick={() => {
          // 这里可添加查看答案逻辑，比如高亮正确选项、计算得分等
          console.log("查看答案");
        }}>查看答案</button>
      )}
    </div>
  );
}

删除Template组件里的多余代码 #

把Template里的这一行删掉：

{props.count >= 3 && <button></button>}

（可选）优化handleSelect的计数逻辑 #

function handleSelect(id, selectedAnsId) {
  setQuizData((prevQuizData) => {
    // 找到当前题目，检查是否已有选中选项
    const targetQuestion = prevQuizData.find(q => q.id === id);
    const hasSelectedOption = targetQuestion.answers.some(ans => ans.isSelected);

    // 仅当前题未选过选项时，才增加计数
    if (!hasSelectedOption) {
      setCount(prev => prev + 1);
    }

    // 原有选项选中逻辑保持不变
    return prevQuizData.map((question) => {
      return question.id === id
        ? {
            ...question,
            answers: question.answers.map((answer) => {
              return answer.id === selectedAnsId
                ? { ...answer, isSelected: !answer.isSelected }
                : { ...answer, isSelected: false };
            })
          }
        : question;
    });
  });
}

内容的提问来源于stack exchange，提问作者Cable-Nerd