在 react-final-form 中清除表单重置的 react-datepicker

Question

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

这是我的 codesandbox link 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，但我无法让它工作。
然后如何将日期设置为 selected 年的 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 中的代码。

看看它，如果有任何遗漏或有任何疑问，请告诉我。

Answer 2

该值存储在this.component_name.current.state中，因此使用赋值运算符并为其分配一个空字符串。在状态更改操作（setState 或 useState）的回调中执行此操作。应该管用。为我工作。

this.startdate.current.state.value = "";
this.startdate.current.state.inputValue = "";

在 react-final-form 中清除表单重置的 react-datepicker

Clear react-datepicker on form reset in react-final-form

reactjs

react-final-form

react-datepicker