useState 检查是否所有单选框都被选中答案

【问题标题】：useState to check if all radio boxes selecteduseState 检查是否所有单选框都被选中
【发布时间】：2021-08-19 11:05:06
【问题描述】：

在我的 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>

我想禁用“下一步”导航按钮，除非所有答案都被选中。我创建了一个名为proceed的状态，默认为false：

const [proceed, setProceed] = React.useState(false);

在我的handleChange 事件中，如果问题的数量少于答案的数量，则该按钮被禁用。

  const setAnswers = async () => {
    if (questionsData.length < selectedAnswers.length) {
      setProceed(false);
      return;
    }

然后我在setAnswershandleChange 函数中添加了这条语句，以检查用户是否可以在步进器中继续到下一页：

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

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

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

setProceed === false 条件正常工作。 set proceed === true 似乎正在工作，但我发现如果我点击问题中的最后一个答案而不点击其他答案，setProceed is === true 被触发并启用按钮，允许用户跳过问题。

我在 MUI 单选按钮中添加了 required 标志，但函数绕过了它。

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

【问题讨论】：

你能在选中的答案中显示数据的样子吗？

标签： javascript reactjs react-hooks material-ui

【解决方案1】：

而不是使用长度来比较是否所有值都已填充。您可以使用来自Array 的every。

如果您选择的答案包含布尔 ( [ true, false ] ) 值列表，那么您可以这样做

const isAllAnswersSelected = selectedAnswers.every(Boolean)

如果 selectedAnswers 中的所有项目都为真，isAllAnswersSelected 将为真，否则返回假。

参考

Array Every

【讨论】：

【解决方案2】：

Material UI 不提供验证，您必须自己处理验证和错误状态。

required 表单属性将星号添加到标签而不是验证。

<Radio className="PrivateRadioButtonIcon-root-9" required={true} error={questionHasError(qIndex)}/> 将再次添加样式级别错误指示符。

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

const [answeredQuestions, setAnsweredQuestions] = useState([]);

.
.
.
const setAnswers = async (qIndex) => {
  const updatedAnsweredIdx = [...answeredQuestions, qIndex];
  setAnsweredQuestions(updatedAnsweredIdx );
  
  // check if all the questions have been selected/answered
  if(allQuestionIndex.every(idx => updatedAnsweredIdx.includes(idx))){ 
    setProceed(true);
  } else {
    setProceed(false);
  }
}

然后，您可以通过跟踪问题是否得到回答并传递错误道具以突出显示错误状态来增强验证。

【讨论】：