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

Question

我在我的 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的state，默认为false：

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

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

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

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

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

最后，我将 handleChange function 传递到我的按钮中：

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

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

我将required的标志添加到 MUI 单选按钮，但 function 绕过它。

类似于S/O 上的这个答案（与 PHP 相关），如何确保在 React 中启用此 state 更改之前必须选择所有答案？

Answer 1

如果所有值都已填充，而不是使用长度进行比较。 您可以使用Array中的every 。

如果您选择的答案包含 boolean ( [ true, false ] ) 值列表，那么您可以执行

const isAllAnswersSelected = selectedAnswers.every(Boolean)

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

参考

数组每个

Answer 2

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

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

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

您可以维护一个 state 的已回答问题吗？

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);
  }
}

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