Reactjs 将react钩子表单与日期/时间选择器一起使用并使用物料UI的示例？

有没有人举过将react钩子表单与日期/时间选择器一起使用并使用Material UI的例子？我已经能够使用一个具有“datetime local”类型的Mui文本字段实现，并且我可以设置日期/时间，但是我无法使用react hook表单的默认值在输入表单时获取时间戳以显示在字段中；也就是说，日期/时间值不会出现在选择器中。手动设置日期/时间值并提交表单后，该值将正确绑定到react hook表单“data”对象。下面是我代码中的一些片段。我用省略号（…）替换了不相关的代码

从“React”导入React；
从“react hook form”导入{Controller，useForm}；
从“@material ui/core”导入{TextField}；
...
接口IMyFormProps{
名称：字符串；
描述：字符串；
发生时间戳：日期；
}
...
常量MyForm:React.FC=（props:IMyFormProps）=>{
...
//设置表单的详细信息
const{register，control，formState，handleSubmit，errors}=useForm({
默认值：{
名称：props.name，
描述：props.description，
occurrenceTimestamp:props.occurrenceTimestamp
},
模式：“全部”
});
...
返回(
>
)
}

您能试试下面的代码吗？
从“React”导入React；
从“react hook form”导入{Controller，useForm}；
从“@material ui/core”导入{TextField}；
...
接口IMyFormProps{
名称：字符串；
描述：字符串；
发生时间戳：日期；
}
...
常量MyForm:React.FC=（props:IMyFormProps）=>{
...
//设置表单的详细信息
const{register，control，formState，handleSubmit，errors}=useForm({
默认值：{
名称：props.name，
描述：props.description，
occurrenceTimestamp:props.occurrenceTimestamp
},
模式：“全部”
});
...
返回(
//日期/时间选择器
>渲染={（道具）=>
>{…道具}
>type=“datetime本地”
>label=“发生日期/时间”
>             />
>           }
>name=“发生时间戳”
>control={control}
>         >
>         
> 
>
)
}
您能试试下面的代码吗？
从“React”导入React；
从“react hook form”导入{Controller，useForm}；
从“@material ui/core”导入{TextField}；
...
接口IMyFormProps{
名称：字符串；
描述：字符串；
发生时间戳：日期；
}
...
常量MyForm:React.FC=（props:IMyFormProps）=>{
...
//设置表单的详细信息
const{register，control，formState，handleSubmit，errors}=useForm({
默认值：{
名称：props.name，
描述：props.description，
occurrenceTimestamp:props.occurrenceTimestamp
},
模式：“全部”
});
...
返回(
//日期/时间选择器
>渲染={（道具）=>
>{…道具}
>type=“datetime本地”
>label=“发生日期/时间”
>             />
>           }
>name=“发生时间戳”
>control={control}
>         >
>         
> 
>
)
}
Hello@thomas您能在控制器代码下粘贴吗？Hello@thomas，请在控制器代码下粘贴好吗？谢谢，@Bipil，谢谢你的回复！您发布的建议似乎解决了为日期设置一个值的问题，通过使用react-hook表单（onChange处理内置在react-hook表单中），我的代码中已经使用了该值。我面临的挑战是，在使用表单输入组件时，日期/时间选择器中不显示日期，并且在react hook表单默认值结构中设置了一个（默认）值。（注意：文本字段工作正常。）@bibil，谢谢您的回复！您发布的建议似乎解决了为日期设置一个值的问题，通过使用react-hook表单（onChange处理内置在react-hook表单中），我的代码中已经使用了该值。我面临的挑战是，在使用表单输入组件时，日期/时间选择器中不显示日期，并且在react hook表单默认值结构中设置了一个（默认）值。（注意：文本字段工作正常。）
Could you please try below code? 







    import React from 'react';
    import { Controller, useForm } from 'react-hook-form';
    import { TextField } from '@material-ui/core';
    ...

    interface IMyFormProps {
      name: string;
      description: string;
      occurrenceTimestamp: Date;
    }

    ...

    const MyForm: React.FC<IMyFormProps> = (props: IMyFormProps) => {

      ...

      // set up details for ReactHookForm
      const { register, control, formState, handleSubmit, errors } = useForm({
        defaultValues: {
          name: props.name,
          description: props.description,
          occurrenceTimestamp: props.occurrenceTimestamp
        },
        mode: "all"
      });

      ...

      return (
        <form onSubmit=... 
            // a text input for Name
            <TextField
              inputRef={register({ required: true })}
              name="name"
              label="Name"
              ...
            />

            // a text input for Description
            <TextField
              inputRef={register({ required: true })}
              name="description"
              label="Description"
              ...
            />

     

>    // The Date/Time Picker
>         <Controller
>           render={(props) =>
>             <TextField
>               {...props}
>               type="datetime-local"
>               label="Occurrence Date/Time"
>             />
>           }
>           name="occurrenceTimestamp"
>           control={control}
>         >
>         </Controller>
> 
        >
        

</form>
      )
    }