如何使用带有 formik 的 antd 设置和获取日期选择器值？

Question

我在这里用 antd 创建 Datepicker 并将这个 antd datepicker 传递给 formik field.My Datepicker with antd 的示例代码

    import React from "react";
    import { Form, DatePicker } from "antd"
    import { Field } from "formik";
    import moment from 'moment';

    const FormItem = Form.Item;

    function onChange(date, dateString) {
        console.log(date, dateString);

    }
     const dateFormat = "MM-DD-YYYY"

   // Here i am adding antd error message through DateInput

     const DateInput = ({
            field,
            form: { touched, errors },
            ...props
        }) => {
            const errorMsg = touched[field.name] && errors[field.name]
            const validateStatus = errorMsg ? "error"
                : (touched[field.name] && !errors[field.name]) ? "success"
                    : undefined

            return (
                <div>
                    <FormItem 
                    label={props.label}
                    help={errorMsg}
                    validateStatus={validateStatus}
                    hasFeedback
                   {...props.formitemlayout}>

                    <DatePicker onChange={onChange} defaultPickerValue={moment()}/> 
                    </FormItem>

                </div>
            )
        }
        export default DateInput

我正在将此 ant 组件添加到 formik 字段组件，使用 handleSubmit 提交表单并应用 YUP 验证。我在提交表单时遇到问题我在获取所需的 DatePicker 验证，问题是选择 DatePicker 的值我在提交表单后未获取值和验证消息。

  class FormikApollo extends React.Component {

        render() {
            const { values, handleSubmit, setFieldValue } = this.props
            return (
                <div align="center">
                    <Form onSubmit={handleSubmit}>
                                <Field
                                    name="username"
                                    label="Name"
                                    placeholder="Enter a Name"
                                    component={TextField}
                                    value={values.username}
                                    formitemlayout={formItemLayout}

                                />
                                <Field
                                    name="email"
                                    label="Email"
                                    placeholder="Enter an Email"
                                    component={TextField}
                                    value={values.email}
                                    formitemlayout={formItemLayout}


                                />

                                <Field
                                    name="password"
                                    label="Password"
                                    type="password"
                                    placeholder="Enter a Password"
                                    component={TextField}
                                    formitemlayout={formItemLayout}
                                />
                                 <Field
                                    name="dateofbirth"
                                    label="dateOfBirth"
                                    type="date"
                                    component={DateInput}
                                    formitemlayout={formItemLayout}
                                    defaultValue={values.dateofbirth}
                                    format={dateFormat} 

                                />


                    <Button type="primary" htmlType="submit">Submit</Button>
                     </Form>  
 )
   }

}

在这里，我通过 withFormik 获取值并使用 handleSubmit 提交表单。为什么我没有获取日期选择器值以及为什么在选择日期选择器值后显示验证消息？

 const FormikApp = (withFormik)({
        mapPropsToValues({ username, email, password, dateofbirth }) {
            return {
                username: username || '',
                email: email || '',
                password: password || '',
                dateofbirth: dateofbirth || ''


            }
        },
        validationSchema: Yup.object().shape({
            username: Yup.string()
                .min(3, "Username must be above 3 characters")
                .required("Username is required"),
            email: Yup.string()
                .email("Invalid Email !!")
                .required("Email is required"),
            password: Yup.string()
                .min(6, "Password must be above 6 characters")
                .required("Password is required"),

            dateofbirth: Yup.string().required("Date is required")



        }),
        handleSubmit(values, { resetForm }) {
            resetForm();
            console.log(values)

        }

    })(FormikApollo)

Answer 1

在您的 DateInput 组件中尝试使用 Formik 的 setFieldValue() 方法设置值是否有效。我相信您可以通过以下方式提取它：form: { touched, errors, setFieldValue }.

同时检查表单中的 touched 项，并确保您正在更改日期字段的值。

如何使用带有 formik 的 antd 设置和获取日期选择器值？

How to set and get a datepicker value using antd with formik?

reactjs

gatsby

antd

yup

formik