React Typescript:MuaAccordion OnChange事件处理程序类型错误

Question

我是typescript的新手，需要为事件处理程序编写类型的指导。我在我的组件中使用材料ui Accordion，并从容器中调用处理程序。因此，我需要在组件接口中指定handleChange的类型。

内部组件：

<Accordion
square
expanded={expanded === 'panel1'}
onChange={handleChange('panel1')}
>Content</Accordion>

集装箱内部：

const handleChange = (panelName: string) => (event, isExpanded: boolean) =>  {
setExpanded(isExpanded ? panelName : false)
}

(JSX属性)AccorsionProps.onChange？：((event:React.ChangeEvent<{}>，展开：boolean)=>void)|未定义

错误：类型"void"不可分配给类型"((event:ChangeEvent<｛｝>，expanded:boolean)=>void)|undefined'。

问题：应该将什么指定为handleChange的类型？

interface Props {
expanded: string
handleChange: ???
}

Answer 1

在放入如下接口类型后，

interface Props {
expanded: string | boolean
handleChange: (
panel: string,
) => (event: React.ChangeEvent<unknown>, expanded: boolean) => void
}

集装箱呼叫：

const handleChange = (panel: string) => (
event: React.ChangeEvent<unknown>,
isExpanded: boolean,
) => {
setExpanded(isExpanded ? panel : false)
}

由于curried函数，我感到困惑，但我不确定，使用类型-"未知">是最佳做法。

Answer 2

您的handleChange是一个返回void的函数(它只是设置一个组件状态)。

无论如何，我猜想Props.handleChange实际上就是Props.onChange(如果是手风琴道具的话)。无论如何，我想那个props签名应该是(event: React.ChangeEvent<{}>, expanded: boolean) => void(正如编译器告诉的那样)。

这样的东西：

interface Props {
expanded: string;
onChange(event: React.ChangeEvent<{}>, expanded: boolean): void;
// or
onChange: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
}

我希望这正是你所需要的。