我如何使用 formik 形式在 react-datepicker 中获取选定的日期？

Question

我在其中使用 Formik 和 react-datepicker。 当我选择日期并点击提交表单时，它会显示"startDate": ''，当我将initialValues={{ startDate: '' }} 更改为initialValues={{ startDate: this.state.startDate }} 时，它会显示今天的日期（当前日期）。 但我想得到选定的日期。

//import libraries
import React from 'react'
import { Formik, Form } from 'formik'
import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css";

//Class component
export default class InsertStockComponent extends React.Component {
  state = {
    startDate: new Date()
  }

  handleChange = (date) => {
    this.setState({
      startDate: date
    });
  }
  render() {
    return (
      <div id="main-content">
        <Formik
          initialValues={{ startDate: '' }}

          onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              setSubmitting(false);
            }, 400);
          }}

        >
          {({ isSubmitting }) => (

            <div className="row clearfix">
                  <div className="header">
                  </div>
                    <Form>
                      <div className="row ml-4 mr-4">
                        <div className="form-group col-3 mb-2">

                          <DatePicker selected={this.state.startDate} dateFormat="MMMM d, yyyy" className="form-control" name="startDate" onChange={this.handleChange} />
                        </div>

                      </div>
                      <div className="row mb-3">
                        <div className="col-5 mb-4"></div>
                        <button type="submit" className="btn btn-lg btn-outline-success mt-4 mb-4" disabled={isSubmitting}>insert item</button>
                      </div>
                    </Form>
                  </div>
          )}
        </Formik>
      </div>
    )
  }
}

Answer 1

解决方案

我在这里为您创建了一个工作示例：https://stackblitz.com/edit/demo-react-formik-datepicker

看看。继续阅读解释。

说明

Formik 用于管理表单的状态。因此，您不需要定义自己的状态，因为 Formik 为您提供了执行此操作的实用程序。因此，您可以安全地删除这段代码：

 state = {
    startDate: new Date()
 }

 handleChange = (date) => {
    this.setState({
      startDate: date
    });
 }

相反，使用values.startDate 和setFieldValue 管理您的状态，这两者都由Formik 基于您传递给它的initialValues 提供。