如何指定函数组件的React Day Picker组件的handleDayClick

Question

我有一个功能组件，我正在使用react day picker组件。在示例页面上，他们使用了一个基于类的组件，并提供了如何处理日期选择的示例：

...
handleDayClick(day, { selected }) {
}
...
<DayPicker
onDayClick={this.handleDayClick}
/>

在我的功能组件中，我这样做了：

const handleDayClick = (day, { selected }) => {
...
}
...
<DayPicker
onDayClick={handleDayClick}
/>

但TypeScript抱怨说(带下划线的onDayClick(：

No overload matches this call.
Overload 1 of 2, '(props: DayPickerProps | Readonly<DayPickerProps>): DayPicker', gave the following error.
Type '(day: any, { selected }: { selected: any; }) => void' is not assignable to type '(day: Date, modifiers: DayModifiers, e: MouseEvent<HTMLDivElement, MouseEvent>) => void'.
Types of parameters '__1' and 'modifiers' are incompatible.
Property 'selected' is missing in type 'DayModifiers' but required in type '{ selected: any; }'.
Overload 2 of 2, '(props: DayPickerProps, context: any): DayPicker', gave the following error.
Type '(day: any, { selected }: { selected: any; }) => void' is not assignable to type '(day: Date, modifiers: DayModifiers, e: MouseEvent<HTMLDivElement, MouseEvent>) => void'.ts(2769)

也尝试过这个：

<DayPicker
onDayClick={() => handleDayClick()}
/>

但是我不知道该给handleDayClick()函数提供什么参数，它需要两个参数，所以TypeScript抱怨说：Expected 2 arguments, but got 0.

非常感谢您的帮助！

Answer 1

将函数params更改为this以使TypeScript愉快：

const handleDayClick(day: Date, modifiers: DayModifiers)