带有 React Hook 形式的 Antd RangePicker 组件答案

【问题标题】：Antd RangePicker Component with React Hook Form带有 React Hook 形式的 Antd RangePicker 组件
【发布时间】：2021-04-03 05:25:23
【问题描述】：

我目前有一个 react-hook-form 托管表单，我已将 antd RangePicker 添加到其中。我在将 RangePicker 传递给表单对象时遇到问题。目前，默认值通过正常，但没有进行任何更改。

OnChange 事件似乎由标准的Controller 方法与其他字段类型（Input 等）一起处理。我的猜测是我必须在这里写一些自定义的东西，但我不确定。提前感谢您的帮助。

这是我当前使用 react-hook-forms Controller 方法管理的 antd DatePicker。

编辑：更新了我的代码以在 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);
        }}
        />
    )}
/>

【问题讨论】：

标签： reactjs antd react-hook-form

【解决方案1】：

想通了。显然，react-hook-form 正确地将 RangePicker 更改传递给我的表单对象，我只是无法根据日志判断。

当我更新选择器时，Moment 对象（两个日期）在 react-hook-form watch() 生成的日志中看起来没有更新（两者看起来都是 2020 年 3 月 3 日）。

但是，当我展开 Moment 对象时，我得到了更新的日期（2020 年 3 月 3 日和 2020 年 3 月 5 日）。

我会将我的工作 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);
        }}
    />
    )}
    />

【讨论】：