react-hook-form 和 react-datetime：如何通过按钮将时间设置为 moment()

Question

我在 react-hook-form

我希望用户使用按钮 Immediate 轻松地将时间设置为当前时间。而不是手动选择当前时间。

我正在尝试以下


const [currentDateTime, setcurrentDateTime] = useState(null);
<Controller
    name="resetDateTime"
    control={control}
    required
    render={({ field }) => (
        <Datetime
            onChange={setcurrentDateTime}
            inputProps={{
                placeholder: "MM-DD-YYYY HH:mm",
            }}
            value={currentDateTime}
            viewMode="time"
        />
    )}
/>
<Button color="primary" className="ml-1" onClick={() => setcurrentDateTime(moment())}>
    {"Immediate"}
</Button>

问题是提交我得到的react-hook-form resetDateTime = undefined

如何正确实施。所以我可以使用 Immediate 按钮并提交表单并获取 resetDateTime 值

Answer 1

您正在将 RHF 与您当地的州混合 currentDateTime 并且没有链接。字段到 RHF，因为您缺少将 field 对象传播到 <Datetime /> 组件。

正确的方法是使用 RHF 的 setValue 更新您的 resetDateTime 字段并摆脱 useState 挂钩。

const { control, handleSubmit, setValue } = useForm();

<Controller
    name="resetDateTime"
    control={control}
    required
    render={({ field }) => (
        <Datetime
            {...field}
            inputProps={{
                placeholder: "MM-DD-YYYY HH:mm",
            }}
            viewMode="time"
        />
    )}
/>

<Button color="primary" className="ml-1" onClick={() => setValue("resetDateTime", moment())}>
    {"Immediate"}
</Button>

react-hook-form 和 react-datetime：如何通过按钮将时间设置为 moment()

react-hook-form and react-datetime: How to set the time to moment() from a button

react-datetime

react-hook-form