Formik 與 react-day-picker

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;

日期選擇器.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>

主頁.js

我的問題是在我的瀏覽器 DevTools 中 datepicker 的值更改正確<input name="startdate" id="startdate" class="form-control" value="23.06.2022">但在我的formikProps.values.startdate我只獲取舊的初始值。

此外，如果我將日志事件添加到 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