时间戳

首页 > 解决方案 > 是的，Formik 没有 Datepicker 值

javascript - 是的，Formik 没有 Datepicker 值

问题描述

我一直在尽一切努力使此表单与 yup 一起使用，但是当使用日期选择器时，该值既不会在字段中注册，也不会与 yup 一起注册。我的相关导入是 formik、yup、useForm 和 yupResolver。

我删除了不相关的代码以节省空间。我拥有的其他字段是名字、姓氏、电子邮件和电话号码，它们都按应有的方式工作，当它们不符合条件时会显示值注册和错误。

我有一个带有 formik 元素的控制台日志，它记录所有值，并且所有值都被正确记录，但日期除外，日期为空。

const Form = () => {
    const [fromDate, setFromDate] = useState(new Date());

    return (
        <>
            <div>
                <Formik validationSchema={formVal}>
                    {({ values,
                        errors) => ( 
                        <form onSubmit={handleSubmit(onSubmit)}>
                            <div>
                                <DatePicker
                                    id="fromDate"
                                    onChange={(date) => {
                                        setFieldValue(date);
                                    }}
                                />
                            </div>
                            <Button type="submit" ></Button>
                        </form>
                )}
                </Formik>
            </div>
        </>
    )}

标签： javascriptdatepickerreact-hooksformikyup

解决方案

您似乎没有正确使用“setFieldValue”；第一个参数应该是表单的字段名称。

应该是这样的： setFieldValue('fromDate', date); 请参阅https://formik.org/docs/api/formik以供参考。

此外，请确保变量“日期”是 Date 类型，而不是包含实际日期值的对象。

推荐阅读