如果设置了默认值，为什么Fluent UI React的DatePicker中突出显示的日期没有改变？

Question

参考Fluent UI React v9的DatePicker：https://react. Fluentui.dev/?path=/docs/compat-components-datepicker--default，value属性为默认值。但是当我设置它时，奇怪的事情发生了。

每当我设置

value

属性时，无论在 DatePicker 中选择任何日期，DatePicker 中突出显示的 Day 都会保持不变。

设置默认值后，如何确保突出显示的日期相应更改？我的想法是应用 useState 并重新渲染 DatePicker，但我觉得这有点过分了。

---

注意：如果我只设置

initialDatePicker

值，突出显示的日期会根据所选日期而变化，但文本输入字段不会显示初始日期

另外，这就是我所说的突出显示的日子

这是代码和演示：https://stackblitz.com/edit/ppi3bg?file=src%2Fexample.tsx

Answer 1

您遇到的问题是因为当您将 value 属性设置为特定日期时，DatePicker 组件不会自动更新突出显示的日期以匹配该日期。这是 Fluent UI React DatePicker 中的设计行为。

为了确保设置默认值时突出显示的日期相应变化，您可以通过更新initialPickerDate以匹配起息日期以编程方式处理它。方法如下：

import * as React from 'react';
import { DatePicker } from '@fluentui/react-datepicker-compat';
import { Field } from '@fluentui/react-components';
import type { DatePickerProps } from '@fluentui/react-datepicker-compat';

export const Default = (props: Partial<DatePickerProps>) => {
  const [selectedDate, setSelectedDate] = React.useState(new Date());
  const initialPickerDate = props.initialPickerDate || selectedDate;
  const handleDateChange = (date: Date | null | undefined) => {
    if (date) {
      setSelectedDate(date);
    }
  };

  return (
    <>
      <Field label="Select a date (Input field has value but highlight wouldn't change)">
        <DatePicker
          placeholder="Select a date..."
          value={selectedDate}
          initialPickerDate={initialPickerDate}
          onSelectDate={handleDateChange}
          {...props}
        />
      </Field>
      <Field label="Select a date #2 (highlight changes but no initial value in Input field)">
        <DatePicker
          placeholder="Select a date..."
          initialPickerDate={new Date('May 2, 2024')}
          {...props}
        />
      </Field>
    </>
  );
};

我维护一个名为

selectedDate

的状态来跟踪我选择的日期。我使用这个

selectedDate

作为 DatePicker 的 value prop 和

initialPickerDate

的默认值。此外，我提供了一个名为

handleDateChange

的函数，每当我更改 DatePicker 中的日期时都会更新

selectedDate

。这可确保突出显示的日期根据我选择的日期进行相应更改。