javascript - 我想了解使用 React 创建测验应用程序时的正确方法

Question

我想使用 React 创建小问题和答案，即给出一个问题，用户通过单击单选按钮选择一个答案，然后他单击该按钮并为此目的检查问题，我想使用这个来自 Material UI 框架的示例。

问题是我对应用程序的逻辑感到困惑，请看这段代码

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(3),
  },
  button: {
    margin: theme.spacing(1, 1, 0, 0),
  },
}));

export default function ErrorRadios() {
  const classes = useStyles();
  const [value, setValue] = React.useState('');
  const [error, setError] = React.useState(false);
  const [helperText, setHelperText] = React.useState('Choose wisely');

  const handleRadioChange = (event) => {
    setValue(event.target.value);
    setHelperText(' ');
    setError(false);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    if (value === 'best') {
      setHelperText('You got it!');
      setError(false);
    } else if (value === 'worst') {
      setHelperText('Sorry, wrong answer!');
      setError(true);
    } else {
      setHelperText('Please select an option.');
      setError(true);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormControl component="fieldset" error={error} className={classes.formControl}>
        <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
        <RadioGroup aria-label="quiz" name="quiz" value={value} onChange={handleRadioChange}>
          <FormControlLabel value="best" control={<Radio />} label="The best!" />
          <FormControlLabel value="worst" control={<Radio />} label="The worst." />
        </RadioGroup>
        <FormHelperText>{helperText}</FormHelperText>
        <Button type="submit" variant="outlined" color="primary" className={classes.button}>
          Check Answer
        </Button>
      </FormControl>
    </form>
  );
}

单击表单的按钮时，会触发“handleSubmit”方法并开始验证。我想了解这样的验证是否真的合适？因为它检查“如果值不等于'最差'，则显示'对不起，错误答案！'”

但整个问题是我可以有很多值，例如“最佳、最差、颜色、狗、动物”等等，并且每个值都必须在方法内部手动检查？我决定使用这种方法（我的代码略有不同，但本质没有改变）

导出默认函数 TaskIntroduction() {

const [task, setTask] = useState([
        {
            key: "1",
            answer: "You can override the style of the component thanks to one of these customization points."
        },
        {
            key: "2",
            answer: "If that's not sufficient, you can check the implementation of the component for more detail."
        },
        {
            key: "3",
            answer: "Any other props supplied will be provided to the root element (native element)."
        }
    ]
);

const [value, setValue] = React.useState('');
const [error, setError] = React.useState(false);
const [helperText, setHelperText] = React.useState('Choose wisely');

const handleRadioChange = (event) => {
    setValue(event.target.value);
    setHelperText(' ');
    setError(false);
};

const handleSubmit = (event) => {
    event.preventDefault();

    if (value === '1') {
        setHelperText('You got it!');
        setError(false);
    } else if (value !== '1') {
        setHelperText('Sorry, wrong answer!');
        setError(true);
    } else {
        setHelperText('Please select an option.');
        setError(true);
    }
};

    const answerList = task.map((i, index) => {
            return (
               <RadioGroup aria-label="quiz" name="quiz" value={value} onChange={handleRadioChange}>
                   <FormControlLabel value={i.key} control={<Radio />} label={i.answer} />
               </RadioGroup>
            );
        }
    )


return (
        <Box>
            <form onSubmit={handleSubmit}>
                <FormControl component="fieldset" error={error}>
                    <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
                    {answerList}
                    <FormHelperText color={'succeeded'}>{helperText}</FormHelperText>
                    <Button type="submit" variant="outlined" color="primary">Check Answer</Button>
                </FormControl>
            </form>
        </Box>
);

}

我这里的代码有点不一样，我把值和文本存储在对象里面，但是请注意May的逻辑，逻辑略有不同，但是这里的问题是，如果用户没有选择任何项目，但是只需点击按钮，它就会为我工作“对不起，错误的答案！” 而不是“请选择一个选项。” 如何检查用户没有选择任何选项，而只是单击了按钮？

标签： javascriptreactjsif-statementkey-value