与React-day-ficker形成

Question

我想创建一个带有日期选择器的表格。因此，我选择 react daypicker v8 现在，我想以我的当前形式形式实现此选择器。

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

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中=“ 23.06.2022”＆gt; ，但在我的formikprops.values.values.startdate中，我仅获得旧的初始值。

另外，如果我将日志事件添加到datepicker.js组件中的“处理”函数，则日志不会显示。为什么？

这是正确的方法吗？在反作用字段中，此代码效果完全很好。

Answer 1

我的解决方案是

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

关键字是ondayClick而不是Onchange