在反应最终形式中重置表单时清除反应日期选择器

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 日。

日期选取器组件：

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>

所以我的问题是：

1. 如何在表单重置时清除反应日期选择器及其输入值？有一个clear()功能，但我无法使其工作。
2. 然后如何将日期设置为所选年份的 1 月 1 日和 12 月 31 日？我为每个字段添加了initialValue，表单的值已更新。但输入的值保持不变。

Answer 1

表单中的问题很少。

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: ""
};

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

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

3. 从给定的代码中，我没有看到 datepicker.jsx 中对 usestate 的任何要求，因为它似乎由表单处理。所以删除了它。

我已经更新了沙盒中的代码。

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

Answer 2

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

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