如何将datetimepicker与typescript一起使用

Question

为什么我得到这个TS错误：

Type '(newDate: Date) => void' is not assignable to type '((event: Event, date?: Date | undefined) => void) | (((event: Event, date?: Date | undefined) => void) & ((event: AndroidEvent, date?: Date | undefined) => void)) | (((event: Event, date?: Date | undefined) => void) & ((event: WindowsDatePickerChangeEvent, date?: Date | undefined) => void)) | undefined'.
Type '(newDate: Date) => void' is not assignable to type '(event: Event, date?: Date | undefined) => void'.
Types of parameters 'newDate' and 'event' are incompatible.
Type 'SyntheticEvent<Readonly<{ timestamp: number; }>, Event>' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 37 more.ts(2322)
index.d.ts(36, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & PropsWithChildren<Readonly<Readonly<ViewProps & BaseOptions & { maximumDate?: Date | undefined; minimumDate?: Date | undefined; }> & { ...; }> | Readonly<...> | Readonly<...>>'

代码：

<DateTimePicker
value={values.birthday}
mode='date'
display='default'
onChange={(newDate: Date) => {
setFieldValue('birthday', newDate);
}}
/>

我做错了什么？

Answer 1

错误状态：

Type'(newDate:Date(=>void"不可分配给类型"((event:event，date？：date|undefined(=>无效(

您将onChange的(第一个(参数键入为Date。这不是您正在实现的组件所期望的函数签名。此外，您不需要键入函数参数，因为它(函数(是内联定义的，TS可以从组件定义中推断类型。

您没有指定正在使用的程序包。但我会尝试这样的东西：

<DateTimePicker
value={values.birthday}
mode='date'
display='default'
onChange={(_, newDate) => {
setFieldValue('birthday', newDate);
}}
/>

编辑：您可能希望将values.birthday初始化为Date，以便您设置的值与onChange提供的值相匹配。此外，注意，newDate可以是每个onChange签名的undefined。将values.birthday定义为可能的undefined，或者仅当它不是undefined时才调用setState。

请参阅小吃。也在评论中。