我如何在带有 formik 表单的 react-datepicker 中获取选定日期？

Question

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

//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 提供。

我如何在带有 formik 表单的 react-datepicker 中获取选定日期？

How i can get selected date in react-datepicker with formik form?

reactjs

formik

解决方案

说明