javascript 如何在日期/日期状态更改时更新ant design日期选择器的默认值

pod7payv  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(217)

AntD版本:5.0
默认情况下,页面加载时显示默认日期。但我传递的是存储在状态对象中的日期。页面加载成功后,当我从其中一个组件更改日期的状态时,它不会更新所有其他组件中日期选择器的默认值。即使我控制日期,从状态对象接收更新的状态,但是它不呈现更新的状态日期。我该如何解决这个问题?
我希望在更改日期时,所有日期选择器组件中的默认值都应该更新。
下面是我的日期选取器组件

import { DatePicker, Tabs } from "antd";
import Image from "next/image";
import styles from "@desktopStyles/common/searchBox.module.css";
import dayjs from "dayjs";

function DepartDateInput({
  classname,
  flightIndex,
  flightInfoObj,
  setFlightInfoObj,
  setFlag,
}) {
  const onDepartDateChange = (date, dateString, flightInd) => {
    setFlightInfoObj((prev) => {
      let oldVal = prev;
      oldVal.departing[flightInd] = dateString;
      return oldVal;
    });
    setFlag((prev) => {
      return !prev;
    });
  };

  return (
    <div className={classname}>
      <span>{flightInfoObj.departing[flightIndex]}:</span>
      <DatePicker
        onChange={(date, dateString) =>
          onDepartDateChange(date, dateString, flightIndex)
        }
        defaultValue={dayjs(
          String(flightInfoObj.departing[flightIndex]),
          "YYYY-MM-DD"
        )}
      />
     
      <Image
        className={styles.src_ico}
        src={"/images/desktop/src_calander_ico.svg"}
        width={18}
        height={18}
        alt=""
      />
    </div>
  );
}

export default DepartDateInput;

它更新了当前选定日期的组件中的日期,但不会将所有其他组件中的默认值更新为最新值。

f3temu5u

f3temu5u1#

唯一的价值主张不见了。添加价值主张后,它开始正常工作。

< DatePicker
onChange = {
  (date, dateString) =>
  onDepartDateChange(date, dateString, flightIndex)
}
defaultValue = {
  dayjs(
    String(flightInfoObj.departing[flightIndex]),
    "YYYY-MM-DD"
  )
}
value = {
  dayjs(
    String(flightInfoObj.departing[flightIndex]),
    "YYYY-MM-DD"
  )
}
/>

相关问题