带有 React Hook 形式的 Antd RangePicker 组件

Question

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

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

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

编辑：更新我的代码以在 react-hook-form v6+ 中使用 render 方法而不是 as 方法。我还注意到，如果我不传递任何 defaultValue，那么 RangePicker 会接受并传递开始日期和结束日期。但是当我设置默认值时，它总是 returns 默认开始日期两次。

<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);
        }}
        />
    )}
/>

Answer 1

想通了。显然，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);
        }}
    />
    )}
    />

带有 React Hook 形式的 Antd RangePicker 组件

Antd RangePicker Component with React Hook Form

reactjs

antd

react-hook-form