使用 Formik 表单的 React-datepicker

Question

我正在尝试以 Formik 形式使用 react-datepicker。

我有：

 import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class Fuate extends React.Component {
    state = {
        dueDate: new Date()

    }

<Formik
                initialValues={initialValues}
                validationSchema={Yup.object().shape({
                    title: Yup.string().required("A title is required "),
                })}

                onSubmit={this.handleSubmit}

                render={({
                    errors,
                    status,
                    touched,
                    setFieldValue,
                    setFieldTouched,
                    handleChange,
                    handleBlur,
                    handleSubmit,
                    isSubmitting,
                    dirty,
                    values
                }) => {

                return (
                    <div>
            ...

<DatePicker
                                            name={'dueDate'}
                                            value={values['dueDate']}
                                            onChange={e => setFieldValue('dueDate', e)}
                                        />
                                        <DatePicker
                                        style={{ width: 180 }}
                                        date={values.dueDate}
                                        mode="date"
                                        format="YYYY-MM-DD"
                                        minDate={Date.now.toString()}
                                        maxDate="2050-06-01"
                                        confirmBtnText="Confirm"
                                        cancelBtnText="Cancel"
                                        showIcon={false}
                                        customStyles={{
                                            dateInput: {
                                            marginLeft: 0,
                                            borderColor: "#fff"
                                            }
                                        }}
                                        onDateChange={date => setFieldValue("dueDate", date)}
                                        onTouch={setFieldTouched}
                                        />

对于这两个选项，表单呈现，我可以在日历上选择一个日期，但它不会出现在框中，并且状态值不会随着选择而更新。

控制台中没有错误，但警告说：

从 v2.0.0-beta.1 开始 date-fns 不接受字符串作为参数。请使用 parseISO 解析字符串。参见：[e-mail]:45

我尝试制作初始状态：

 dueDate: new Date().toISOString(),

但这没有什么区别。

我看过很多关于使用 Antd 的日期选择器进行设置的帖子，但找不到如何使用 react-datepicker 进行设置的说明。

原文由 Mel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新 Dani Vijay 的回答。

这使用 Formik v2 中的 useField 和 useFormikContext 来简化组件的使用。

日期选择器.jsx：

 import React from "react";
import { useField, useFormikContext } from "formik";
import DatePicker from "react-datepicker";

export const DatePickerField = ({ ...props }) => {
  const { setFieldValue } = useFormikContext();
  const [field] = useField(props);
  return (
    <DatePicker
      {...field}
      {...props}
      selected={(field.value && new Date(field.value)) || null}
      onChange={val => {
        setFieldValue(field.name, val);
      }}
    />
  );
};

用法（有关完整的表格声明，请参阅 Dani 的回答）：

 ...
<DatePickerField name="date" />
...

codesandbox 中的代码

原文由 ToolmakerSteve 发布，翻译遵循 CC BY-SA 4.0 许可协议