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>

问题是我得到resetDateTime = undefined的onSubmit -hook-form

如何正确地实现这一点。因此，我可以使用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>