如何解决带有 React Hook 表单的 Antd RangePicker 组件
我目前有一个 react-hook-form
托管表单,我已向其中添加了 antd
RangePicker
。我在将 RangePicker
的更新传递给表单对象时遇到了问题。目前,默认值通过得很好,但没有进行任何更改。
OnChange
事件似乎由标准 Controller
方法与其他字段类型(Input
等)一起处理。我的猜测是我必须在这里写一些自定义的东西,但我不确定。在此先感谢您的帮助。
这是我当前使用 antd
DatePicker
方法管理的 react-hook-forms
Controller
。
编辑:更新了我的代码以使用 react-hook-form v6+ 中的 render
方法,而不是 as
方法。我还注意到,如果我不传递任何 defaultValue,那么 RangePicker 会接受并传递开始日期和结束日期。但是当我设置 defaultValue 时,它总是两次返回默认开始日期。
<Controller
name="materialarrivalpickup"
control={control}
defaultValue={[
moment(user.project.projectmaterialarrival),moment(user.project.projectmaterialpickup),]}
rules={{ required: true }}
render={(props) => (
<RangePicker
{...props}
format="MM/DD/YYYY"
onChange={(e) => {
props.onChange(e);
console.log("Range Picker " + e);
}}
/>
)}
/>
解决方法
想通了。显然,react-hook-form
正确地将 RangePicker
更改传递给我的表单对象,我只是根据日志无法判断。
当我更新选择器时,Moment 对象(两个日期)在 react-hook-form
watch()
生成的日志中看起来没有更新(两者看起来都是 3/3/2020)。
但是当我展开 Moment 对象时,我得到了更新的日期(3/3/2020 和 3/5/2020)。
我会将我的工作 RangePicker
+ react-hook-form
代码留在这里给需要它的其他人。
<Controller
name="materialarrivalpickup"
style={{ marginBottom: "8px" }}
control={control}
defaultValue={[
moment(user.project.projectmaterialarrival),moment(user.project.projectmaterialpickup),]}
rules={{ required: true }}
render={(props) => (
<RangePicker
{...props}
format="MM/DD/YYYY"
onChange={(e) => {
props.onChange(e);
console.log("Range Picker: " + e);
}}
/>
)}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。