reactjs - 在 React Typescript 中遇到 No overload matches this call 的错误

Question

我正在创建 React 项目并面对，我有一个表单组件，它有 onSubmit 事件，该事件显示错误“没有重载匹配此调用”。这是代码:<StyledForm onSubmit={this.handleSave}>{children}</StyledForm> .

Here onSubmit shows an error of No overload matches this call.
Overload 1 of 2, '(props: Pick & StyledComponentProps, context?: any): ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error. Type '(authorizeRequired?: boolean | undefined) => void' is not assignable to type '(event: FormEvent) => any'. Types of parameters 'authorizeRequired' and 'event' are incompatible. Type 'FormEvent' is not assignable to type 'boolean | undefined'. Type 'FormEvent' is not assignable to type 'true'. Overload 2 of 2, '(props: PropsWithChildren & StyledComponentProps>, context?: any): ReactElement ReactElement Component<...>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error. Type '(authorizeRequired?: boolean | undefined) => void' is not assignable to type '(event: FormEvent) => any'.ts(2769) StyledForm.tsx(25, 5): The expected type comes from property 'onSubmit' which is declared here on type 'IntrinsicAttributes & Pick & StyledComponentProps' StyledForm.tsx(25, 5): The expected type comes from property 'onSubmit' which is declared here on type 'IntrinsicAttributes & Pick & StyledComponentProps & { children?: ReactNode; }'

handleSave的代码:

handleSave = (authorizeRequired?: boolean) => {
        const { mode, isNewDataSource, form, saveHandler } = this.props;
        const data = mergeAll<any>([
            form.value,
            {
                isNew: mode === DSFormMode.create,
                isNewDataSource,
            },
        ]);

        saveHandler(data, authorizeRequired);
    };

StyledForm 的代码:

interface Props extends WithStyles<typeof styles> {
    children: ReactNode;
    onSubmit?(event: FormEvent); // here it shows error of 'onSubmit', which lacks return-type annotation, implicitly has an 'any' return type
}
const StyledFormRoot = ({ classes, children, onSubmit = identity }: Props) => (
    <form className={classes.container} onSubmit={onSubmit}>
        {children}
    </form>
);
export const StyledForm = withStyles(styles)(StyledFormRoot);

如果有什么不明白的请告诉我

Answer 1

将界面上的onSubmit改成(event: FormEvent<HTMLFormElement>)应该这样做

带有 ctrl + click在 onSubmit 上，您可以看到预期返回的是什么

我也总是发现自己在类型方面遇到麻烦:/