Ich habe ein Formular, dem ich eine React-Datums-/Uhrzeitauswahl hinzufügen möchte, aber ich versuche auch, es in react-hook-form
zu integrieren, damit es mit dem Rest des Formulars funktioniert, aber es scheint überhaupt nicht zu funktionieren .
Wenn das Formular zum ersten Mal gerendert wird, wird das aktuelle Datum nicht in der Datumsauswahl angezeigt, sondern nur „----------“, und wenn ich im Popup ein Datum auswähle, wird das Datum im Feld angezeigt auch nicht ändern.
import { Controller, useForm } from 'react-hook-form' import DateTimePicker from 'react-datetime-picker' import 'react-datetime-picker/dist/DateTimePicker.css' import 'react-calendar/dist/Calendar.css' const Jobs = () => { const { control, register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = handleSubmit(async ({ firstname, startdate }) => { console.log(startdate) }) return ( <form onSubmit={handleSubmit(onSubmit)}> <div> <input id="firstname" name="firstname" type="text" { ...register("firstname") } /> </div> <div> <Controller control={control} name='startdate' render={({ field: { onChange, value } }) => ( <DateTimePicker onChange={onChange} selected={value} /> )} /> </div> </form> ) }
看起来你在使用react-hook-form和react-datetime-picker方面是正确的。你面临的问题可能与日期字段的初始值设置不正确有关。
要解决这个问题,你可以使用Controller中的defaultValue属性为日期字段设置初始值。此外,你应该确保传递给DateTimePicker的值是一个Date对象,因为react-datetime-picker期望一个Date值。
下面是更新后的代码:
通过将defaultValue设置为new Date(),日期选择器现在应该在表单首次渲染时显示当前日期。另外,确保使用new Date(value)将值传递给DateTimePicker时是一个Date对象。