javascript - 我需要使用 useformik 在复选框的字段中设置禁用或启用

Question

我需要设置，如果未选中复选框，则日期字段保持禁用如果选中复选框意味着真实日期出现日期字段正在禁用，但是当我选中禁用的复选框并且我检查真假条件启用时功能不起作用我不确定我错过了什么需要在正确的验证中设置此失效我正在使用 useFormik

const validationSchema = Yup.object().shape({
  list: Yup.array().of(Yup.string()).min(1, "Required!").required("Required!"),
  isCheck: Yup.boolean(),
  startDate: Yup.string().when("isCheck", {
    is: true,
    then: Yup.string().required("Required!"),
    otherwise: Yup.boolean,
  }),
  isCheck: Yup.boolean(),
  endDate: Yup.string().when("isCheck", {
    is: true,
    then: Yup.string().required("Required!"),
    otherwise: Yup.boolean,
  }),
});

const ruleForm = useFormik({
    initialValues: {
      // Status: "que",
    },
    validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
      deltaChange(values);
    },
  });

           <Box className={classes.formText}>
                    <Checkbox
                      checked={ruleForm.values.isCheck}
                      onChange={ruleForm.handleChange}
                      color="primary"
                      inputProps={{ "aria-label": "secondary checkbox" }}
                    />
                    <Typography variant="subtitle2" noWrap={true}>
                      <Box fontWeight="fontWeightBold"> By Update Date : </Box>
                    </Typography>
                  </Box>
                  <Grid container display="flex" spacing={4}>
                    <Grid item xs={6}>
                      <TextField
                        id="outlined-select-currency"
                        label="Start Date"
                        variant="outlined"
                        disabled={!ruleForm.values.isCheck}
                        size="small"
                        type="date"
                        InputLabelProps={{
                          shrink: true,
                        }}
                        onChange={ruleForm.handleChange}
                        value={ruleForm.values.startDate}
                        error={ruleForm.errors.startDate}
                        helperText={ruleForm.errors.startDate}
                        name="startDate"
                      ></TextField>
                    </Grid>
                    <Grid item xs={6}>
                      <TextField
                        id="outlined-select-currency"
                        label="End Date"
                        variant="outlined"
                        size="small"
                        // onChange={(e) => setDate(e)}
                        type="date"
                        disabled={!ruleForm.values.isCheck}
                        InputLabelProps={{
                          shrink: true,
                        }}
                        onChange={ruleForm.handleChange}
                        value={ruleForm.values.endDate}
                        error={ruleForm.errors.endDate}
                        helperText={ruleForm.errors.endDate}
                        name="endDate"
                      ></TextField>
                    </Grid>
                  </Grid>

标签： javascriptreactjsvalidationformik