Question

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

此onSubmit显示此调用没有错误的错误。
重载1，共2个，'（道具：Pick＆ StyledComponentProps，上下文？：任意）：ReactElement ReactElement组件）> | null）| （新（props：任何）=> Component <...>）> |组件<...> | null”，则出现以下错误。类型'（authorizeRequired ?:布尔|未定义）=>无效'不能分配给类型'（事件：FormEvent）=>任何'。参数'authorizeRequired'和'event'的类型不兼容。类型'FormEvent'不能分配给类型'布尔值|未定义”。类型'FormEvent'不能分配给类型'true'。重载2，共2个，'（属性：PropsWithChildren＆StyledComponentProps>，上下文？：任意）： ReactElement ReactElement组件<...>）> | null）| （新（道具：任何）=>组件<...>）> |组件<...> | null”，则给出以下内容错误。类型'（authorizeRequired ?:布尔|未定义）=>无效'不能分配给类型'（事件：FormEvent）=>任何'.ts（2769） StyledForm.tsx（25，5）：预期的类型来自属性在此处以类型'IntrinsicAttributes＆声明的'onSubmit' 选择和样式化的组件道具 StyledForm.tsx（25，5）：预期的类型来自属性在此处以类型'IntrinsicAttributes＆声明的'onSubmit' 选择并设置样式 {子代？：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>)即可

在onSubmit上带有ctrl + click的情况下，您可以看到预期返回的内容

我总是也遇到类型麻烦：/

遇到没有重载的错误与React Typescript中的此调用匹配

1 个答案: