使用 MUI DatePickers 使用 react-hook-form 动态字段解析日期值

如何解决使用 MUI DatePickers 使用 react-hook-form 动态字段解析日期值

我无法将解析的日期传递给 react-hook-form 的提交对象。我需要在字段级别处理解析，因为这是一个动态表单，因此我无法控制用户将使用哪些字段。

我正在使用“setValue()”，我可以看到使用“watch()”时定义的值，但在提交时它未定义。找不到我做错了什么。

这是一个可重现的例子：

谢谢！

解决方法

未在 onSubmit 函数中获取日期值的原因是您没有为 defaultValue 字段设置 Controller。您需要在字段级别设置 defaultValue 或使用 useForm 调用 defaultValues。此外，您必须删除 value 的 KeyboardDatePicker 道具，因为 Controller 已经通过传播字段道具来处理此问题。

有关 Controller 的详细信息，请参阅文档中的此 section。

您也不应该将 ref 在 Controller 属性函数中提供的 render 分配给 KeyboardDatePicker，而是将其分配给 ref输入字段的道具（这就是您在 CodeSandbox 演示中收到控制台错误的原因）。这样做可以让 RHF 关注错误输入。您也可以在文档的 Controller 部分找到相关信息。

这里也不需要 setValue，您可以直接将格式化的 Date 返回到 Controller.onChange 方法。 Controller.onChange 方法的返回值会自动使用新值设置 Controller 字段。

真正的问题是：KeyboardDatePicker.onChange 仅在值更改时调用。 IE。如果您最初在没有用户交互的情况下设置日期，则不会触发 KeyboardDatePicker.onChange，因此您的字段具有您最初设置的日期对象的值（只需在更新的 CodeSandbox 中点击“提交”即可进行检查）。只有当您更改日期时，才会调用 KeyboardDatePicker.onChange 并且您会在提交对象中以字符串形式接收格式化的日期。

我不知道一个干净的解决方案如何手动触发 onChange 的 KeyboardDatePicker，可能您必须最初将格式化的日期字符串设置为 defaultValue {1}} 字段而不是 Controller。