Formik 反应形式在更改时获取字段的值

Question

我正在使用 Formik 与 material UI 进行反应。我有两个字段，随着值的变化，我需要对这两个字段进行计算，所以我必须获取这两个字段的值，

    const formik = useFormik({
        initialValues: {
            quantity: '',
            price: '',
            total: '',
        },
        validationSchema: Yup.object({
            quantity: Yup.string().max(5).required('Quantity is required'),
            price: Yup.string().max(5).required('Price is required'),
        }),
        onSubmit: values => {

        },
    })

这是表格

<form onSubmit={formik.handleSubmit}>
    <TextField
        type="number"
        size="small"
        error={Boolean(
            formik.touched.quantity && formik.errors.quantity,
        )}
        helperText={
            formik.touched.quantity && formik.errors.quantity
        }
        label="Quantity"
        margin="normal"
        name="quantity"
        onBlur={formik.handleBlur}
        onChange={formik.handleChange}
        value={formik.values.quantity}
        variant="outlined"
    />
    <TextField
        size="small"
        error={Boolean(formik.touched.price && formik.errors.price)}
        helperText={formik.touched.price && formik.errors.price}
        label="Last Name"
        margin="normal"
        name="price"
        onBlur={formik.handleBlur}
        onChange={formik.handleChange}
        value={formik.values.price}
        variant="outlined"
    />

    {Boolean(
        formik.touched.tax_status && formik.errors.tax_status,
    ) && (
        <FormHelperText error>
            {formik.errors.tax_status}
        </FormHelperText>
    )}
    <Box sx={{ py: 2 }}>
        <Button
            color="primary"
            disabled={formik.isSubmitting}
            fullWidth
            size="large"
            type="submit"
            variant="contained">
            Submit
        </Button>
    </Box>
</form>

如何在每次更改时检索数量和价格的值？

Answer 1

我没用过 formik，所以不确定，也许你可以在你的 formik.values 上放一个 useEffect，然后用它做任何你想做的事情。

类似

useEffect(()=>{

    //do your stuff

},[formik.vaues])

Answer 2

如果你想在表单上显示结果，你可以在你的代码中添加类似的东西；

<div>{formik.values.price} * {formik.values.quantity}</div>

如果您想进行一些验证，可以更新您的验证架构

validationSchema: Yup.object({
  quantity: Yup.string().max(5).required('Quantity is required'),
  price: Yup.string().max(5)
    .required('Price is required')
    .when('quantity', (quantity, schema) => (quantity && schema.test(
      'limit',
      'some message',
      value => {
        return (value && value + quantity > 30) // condition
      }
    ))),

Formik 反应形式在更改时获取字段的值

Formik react form get value of field on change

forms

reactjs

formik