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

Question

我在react-hook-form中使用react-datetime

我希望用户使用按钮轻松将时间设置为当前时间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>

问题是 onSubmit 我得到的 react-hook-formresetDateTime = undefined

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

Answer 1

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

正确的方法是使用 RHFsetValue更新您的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>