Javascript 使用state检查是否选中了所有的收音机框

在我的React应用程序中，我有一组来自后端数据的映射问题，其中用户使用单选按钮选择响应：

<RadioGroup row>
                  {data.response.map((dt, rIndex) => {
                    return (
                      <div className="answerContainer">
                        <FormControlLabel
                          className="MuiTypography-body1"
                          value={dt.value}
                          onChange={() => {
                            debugger;
                            setAnswer(
                              dt.value,
                              data.questionTitle,
                              qIndex,
                              rIndex
                            );
                          }}
                          checked={selectedAnswers[qIndex] === rIndex}
                          control={
                            <Radio
                              className="PrivateRadioButtonIcon-root-9"
                              required={true}
                            />
                          }
                          label={dt.value}
                        />
                      </div>
                    );
                  })}
                </RadioGroup>

然后，我在我的

setAnswers

handleChange函数中添加了这条语句，以检查用户是否可以进入步进器的下一页：

    if (questionsData.length === selectedAnswers.length) {
      setProceed(true);
    }

最后，我将handleChange函数传递到我的按钮：

        <button
          className={proceed ? 'enabled' : 'disabled'}
          onClick={() => {
            setAnswers();
          }}
        > Next </Button>

{
setAnswers（）；
}}
>下一个

setprocedure===false

条件正常工作<代码>设置继续===true似乎正在工作，但我发现如果我单击了问题中的最后一个答案，而没有单击其他答案，

设置继续===true

被触发，按钮被启用，允许用户跳过问题

我在MUI单选按钮中添加了

required

标志，但该功能绕过了它

---

与（与PHP相关）类似，如何确保在React中启用此状态更改之前必须选择所有答案？

而不是使用长度来比较是否填充了所有值。您可以使用

数组中的
每个

如果您选择的答案包含布尔值（[true，false]）列表，则可以执行以下操作：

const isAllAnswersSelected = selectedAnswers.every(Boolean)

isallanswerselected
如果所选答案中的所有项目均为true，则为true，否则返回false

参考

物料界面不提供验证，您必须自己处理验证和错误状态

required
form属性将星号添加到标签，而不是验证

将再次添加样式级别错误指示器

您可以改为保持已回答问题的状态

const[answeredQuestions，setAnsweredQuestions]=useState（[]）；
.
.
.
const setAnswers=async（qIndex）=>{
const updatedAnsweredDX=[…回答问题，qIndex]；
设置回答问题（更新回答dx）；
//检查是否已选择/回答所有问题
if（allQuestionIndex.every（idx=>updatedAnswerEdx.includes（idx））{
设置继续（真）；
}否则{
设置继续（假）；
}
}

然后，您可以通过跟踪问题是否得到了回答来增强验证，并传递错误提示以突出显示错误状态。
您是否可以在检查后显示所选答案中的数据外观？
const isAllAnswersSelected = selectedAnswers.every(Boolean)