Question

我正在使用react-final-form和react-datepicker。我也有一年的选择。开始日期和结束日期应设置为默认年份的1月1日和12月31日。选择新的一年后，我想重置表格，清除两个日期选择器的选定日期和输入值，并将它们分别设置为选定年份的1月1日和12月31日。

这是我的密码和框https://codesandbox.io/s/react-datepicker-clear-cxlxh的链接。

到目前为止，我有一个用于react-datepicker的自定义组件，该组件可与react-final-form一起使用。开始日期和结束日期设置为默认年份的1月1日和12月31日。

DatePicker组件：

const DatePickerWrapper = props => {
  const { input, label, minDate, maxDate } = props;
  const [startDate, setStartDate] = useState(input.value);
  return (
    <div>
      <label>{label}</label>
      <DatePicker
        selected={startDate}
        minDate={minDate}
        maxDate={maxDate}
        onChange={value => {
          setStartDate(value);
          props.input.onChange(value);
        }}
        onBlur={props.input.onBlur}
        onFocus={props.input.onFocus}
        value={props.input.value}
      />
    </div>
  );
};

使用它的字段：

<Field
  name="startDate"
  initialValue={isoDate(minDate(values.year.value))}
  component={DatePickerWrapper}
  minDate={minDate(values.year.value)}
  maxDate={
    values.endDate ? values.endDate : maxDate(values.year.value)
  }
/>

这是我用来重置表格的组件：

<Field name="year" subscription={{}}>
  {({ input: { onChange } }) => (
    <OnChange name="year">
      {value => {
        form.reset({
          ...initialValues,
          year: value
        });
      }}
    </OnChange>
  )}
</Field>

所以我的问题是：

如何在重置表单时清除react-datepicker及其输入值？有一个clear() function，但我无法使其正常工作。
然后如何将日期设置为所选年份的1月1日和12月31日？我为每个字段添加了initialValue，并且表单的值已更新。但是输入的值保持不变。

Answer 1

表格中的问题很少。

您要给您的初始值日期两次。一次位于顶部，然后再次作为道具。 This is causing the render to go into infinite loop。已将所有表单初始化移至对象顶部

const initialValues = {
  year: { value: "2019", label: "2019" },
  startDate: isoDate(minDate("2019")),
  endDate: isoDate(maxDate("2019")),
  amount: ""
};

当您在一年中进行form.reset时，可以在该位置重置开始日期和结束日期的值

form.reset({
  ...initialValues,
  year: value,
  startDate: isoDate(minDate(value.value)),
  endDate: isoDate(maxDate(value.value))
});

从给定的代码中，datepicker.jsx中没有看到对usestate的任何要求，因为它似乎已由表单处理。因此，将其删除。

我已经更新了Sandbox中的代码。

看看它，让我知道是否有任何遗漏或有任何疑问。

清除react-final-form中的窗体重置时的react-datepicker

1 个答案: