带有反应日选择器的 Formik

Question

我想创建一个带有日期选择器的表单。所以我选择 React DayPicker v8 现在我想在我当前的 formik 表单中实现这个选择器。

我创建了一个日期选择器组件：

import React from "react";
import { Form, Popover, OverlayTrigger } from "react-bootstrap";
import { DayPicker, useInput } from "react-day-picker";
import "react-day-picker/dist/style.css";

const DatePicker = (props) => {
  const { inputProps, dayPickerProps } = useInput({
    format: "dd.MM.yyyy",
    required: true,
  });

  const handleChange = (value) => {
    props.onChange(props.name, value);
  };

  const popover = (
    <Popover id="popover-basic" className="mw-100">
      <Popover.Body>
        <DayPicker showWeekNumber weekStartsOn={1} {...dayPickerProps} />
      </Popover.Body>
    </Popover>
  );

  return (
    <>
      <OverlayTrigger
        rootClose
        trigger="click"
        placement="bottom-start"
        overlay={popover}
      >
        <Form.Control
          {...inputProps}
          onChange={handleChange}
          value={props.value}
          name={props.name}
          id={props.name}
        />
      </OverlayTrigger>
    </>
  );
};

export default DatePicker;

DatePicker.js

<Col>
  <Form.Group className="mb-3">
    <Form.Label htmlFor="startdate">Start Date</Form.Label>
    <DatePicker
      name="startdate"
      value={formikProps.values.startdate}
      onChange={formikProps.setFieldValue}
    />
  </Form.Group>
</Col>

Home.js

我的问题是在我的浏览器 DevTools 中，日期选择器的值正确更改了 <input name="startdate" id="startdate" class="form-control" value="23.06.2022"> 但在我的 formikProps.values.startdate 中我只得到旧的 initialValue。

此外，如果我将日志事件添加到 DatePicker.js 组件中的 handleChange 函数，日志将不会显示。为什么？

这是正确的方法吗？在 react-select 字段中，此代码完全可以正常工作。

Answer 1

我的解决方案是

    <Popover id="popover-basic" className="mw-100">
      <Popover.Body>
        <DayPicker
          {...dayPickerProps}
          showWeekNumber
          weekStartsOn={1}
          onDayClick={handleChange}
        />
      </Popover.Body>
    </Popover>

关键字是 OnDayClick 而不是 OnChange

带有反应日选择器的 Formik

Formik with react-day-picker

javascript

datepicker

reactjs

formik