Ich habe ein Formular, dem ich eine React-Datums-/Uhrzeitauswahl hinzufügen möchte, aber ich versuche auch, es inreact-hook-formzu 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 ( ) }
看起来你在使用react-hook-form和react-datetime-picker方面是正确的。你面临的问题可能与日期字段的初始值设置不正确有关。
要解决这个问题，你可以使用Controller中的defaultValue属性为日期字段设置初始值。此外，你应该确保传递给DateTimePicker的值是一个Date对象，因为react-datetime-picker期望一个Date值。
下面是更新后的代码：
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, formState: { errors }, } = useForm(); const onSubmit = handleSubmit(async ({ firstname, startdate }) => { console.log(startdate); }); return (); };通过将defaultValue设置为new Date()，日期选择器现在应该在表单首次渲染时显示当前日期。另外，确保使用new Date(value)将值传递给DateTimePicker时是一个Date对象。