时间戳

首页 > 解决方案 > 如何使用 formik 形式在 react-datepicker 中获取选定日期？

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

问题描述

我在其中使用 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>
    )
  }
}

标签： reactjsformik

解决方案

解决方案

我在这里为您创建了一个工作示例：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您传递给它的。

推荐阅读