Formik 反应表单在更改时获取字段值答案

【问题标题】：Formik react form get value of field on changeFormik 反应表单在更改时获取字段值
【发布时间】：2022-01-06 10:27:34
【问题描述】：

我正在使用 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>

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

【问题讨论】：

我没用过formik所以不确定，也许你可以在formik.values上加一个useEffect，然后用它做任何你想做的事？
@ImanpalSingh，谢谢 :-) 工作。
我会把这个放在答案中

标签： reactjs forms formik

【解决方案1】：

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

类似

useEffect(()=>{

    //do your stuff

},[formik.vaues])

【讨论】：

【解决方案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
      }
    ))),

【讨论】：

是的，这也很完美。
如何在没有 useFormik 的情况下使用它，因为根据文档，<FieldArray> 之类的某些组件不起作用。那么如果我们只使用<Formik> 如何获取值并设置到另一个字段？
formik.org/docs/api/… 你可以使用 setFieldValue()，它需要值名称和值。