Typescript：按钮元素类型属性

Question

我想要一个自定义按钮来选择接收类型属性：

export interface ButtonProps {
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
  type: ??
}


export const Button: React.FunctionComponent<ButtonProps> = ({ children, ...buttonProps }) => {
  return <StyledButton {...buttonProps}>{children}</StyledButton>;
};

export default Button;

与正在运行的“onClick”相同。我尝试填写的任何类型，它仍然会引发错误。type 属性的正确类型是什么？

Answer 1

您可以在编辑器中编写button：

<button type='' />

可能 ctrl/command + 单击type，或将鼠标悬停在type属性上查看其类型。

    interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
        autoFocus?: boolean | undefined;
        disabled?: boolean | undefined;
        form?: string | undefined;
        formAction?: string | undefined;
        formEncType?: string | undefined;
        formMethod?: string | undefined;
        formNoValidate?: boolean | undefined;
        formTarget?: string | undefined;
        name?: string | undefined;
        type?: 'submit' | 'reset' | 'button' | undefined;
        value?: string | ReadonlyArray<string> | number | undefined;
    }

您还可以扩展组件的 props：

export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {}

您可能想要覆盖或省略所需的类型。