基于 Toggle Switch 的 React 提交验证

Question

我的 React 应用程序中有一个非常简单的问题。如果（切换开关 is_delicious）关闭，我只想提交 date 和 is_delicious。但是，我将如何验证（切换开关 is_delicious）是否打开，然后所有 3 个字段都是必需的。

检查这个代码框 link

CLICK HERE

    return (
    <Formik
      initialValues={{
        is_delicious: false,
        date: "",
        food_name: ""
      }}
      validationSchema={foodSchema}
      onSubmit={values => {
        const formData = {
          is_delicious: values.is_delicious === true ? 1 : 0,
          food_name: values.food_name
        };
        console.log(formData);
      }}
    >
      {({
        values,
        touched,
        errors,
        handleChange,
        handleBlur,
        setFieldValue,
        handleSubmit
      }) => (
        <form onSubmit={handleSubmit}>
          <TextField
            name="date"
            variant="outlined"
            value={values.date}
            onChange={handleChange}
            onBlur={handleBlur}
            helperText={touched.date ? errors.date : ""}
            error={touched.date && Boolean(errors.date)}
            label="Date"
            type="date"
            InputLabelProps={{
              shrink: true
            }}
            fullWidth
          />
          <FormControlLabel
            name="is_delicious"
            variant="outlined"
            value={values.is_delicious}
            checked={values.is_delicious}
            onChange={handleChange}
            onClick={() => getFoodValue(values.is_delicious)}
            onBlur={handleBlur}
            control={<Switch color="primary" />}
            label="Is Delicious?"
            labelPlacement="end"
            style={{ display: "flex", justifyContent: "center" }}
          />

          {showFood ? (
            <TableContainer component={Paper}>
              <Table className={classes.table} aria-label="simple table">
                <TableHead>
                  <TableRow>
                    <TableCell>Dessert (100g serving)</TableCell>
                    <TableCell align="right">Calories</TableCell>
                    <TableCell align="right">Fat&nbsp;(g)</TableCell>
                    <TableCell align="right">Carbs&nbsp;(g)</TableCell>
                    <TableCell align="right">Protein&nbsp;(g)</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map(row => {
                    const isItemSelected = isSelected(row);
                    return (
                      <TableRow
                        key={row.name}
                        hover
                        onClick={event => selectFood(event, row)}
                        selected={isItemSelected}
                        value={values.food_name}
                      >
                        <TableCell component="th" scope="row">
                          {row.name}
                        </TableCell>
                        <TableCell align="right">{row.calories}</TableCell>
                        <TableCell align="right">{row.fat}</TableCell>
                        <TableCell align="right">{row.carbs}</TableCell>
                        <TableCell align="right">{row.protein}</TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          ) : (
            ""
          )}
          <Button type="submit" color="primary" variant="contained">
            Submit
          </Button>
        </form>
      )}
    </Formik>
  );

Answer 1

您可以按照此处所述使用 Yup 条件 -

这是您问题的已解决代码和框 - https://codesandbox.io/s/highlightselect-rows-react-material-j03zv?file=/demo.js

所需的验证方案更改是删除 is_delicious: yup.string().required("Select"), 来自 validationScheme 并添加 yup 条件（仅当 is_delicious 为真时才需要验证 food_name 和 date。）如下 -

let foodSchema = yup.object().shape({
  food_name: yup.string().when("is_delicious", {
    is: true,
    then: yup.string().required("Select food")
  }),
  date: yup.string().when("is_delicious", {
    is: true,
    then: yup.string().required("Select Date")
  })
});

注意：我必须更改 FoodTable 的 onClick 以确保 food_name 字段设置正确。

onClick={event => {
   setFieldValue("food_name", row.name);
   selectFood(event, row);
}}

希望这对您有所帮助。

更新：通过添加以下代码

处理显示选择 food_name 的验证错误消息

<TableContainer
    className={
      touched.food_name && errors.food_name && classes.tableError
    }
    component={Paper}
>{...}</TableContainer>

基于 Toggle Switch 的 React 提交验证

React Submit Validations Based on Toggle Switch

javascript

ecmascript-6

reactjs

formik