reactjs - 带有 React Hook 形式的 Antd RangePicker 组件

问题描述

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

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

这是我antd DatePicker正在用react-hook-forms Controller方法管理的电流。

编辑：更新我的代码以使用renderreact-hook-form v6+ 中的方法，而不是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);
        }}
        />
    )}
/>

标签： reactjsantdreact-hook-form

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

reactjs - 带有 React Hook 形式的 Antd RangePicker 组件

问题描述

解决方案

推荐阅读