Créer un bouton personnalisé dans React Typescript et ajouter l'événement onClick

Question

J'essaie de créer un composant de bouton personnalisé dans un projet React Typescript qui utilise React Hooks et des composants stylisés.

// Button.tsx
import React, { MouseEvent } from "react";
import styled from "styled-components";

export interface IButtonProps {
    children?: React.ReactNode;
    props?: any;
    onClick?:
        | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
        | undefined;
}

const Button: React.FC<IButtonProps> = ({
    children,
    onClick = () => {},
    ...props
}) => {
    const handleOnClick = (e: MouseEvent<HTMLButtonElement>) => {
        onClick(e);
    };
    return (
        <ButtonStyles onClick={handleOnClick} {...props}>
            {children}
        </ButtonStyles>
    );
};

export default Button;

const ButtonStyles = styled.button``;

Voici le composant dans lequel je veux utiliser mon bouton personnalisé.

// Login.tsx
import React from "react";
import Button from "../../components/Generic/Button/Button";

const Login: React.FC = () => {
    const clickMe = () => {
        console.log("Button Clicks");
    };

    return (
        <div>
            <Button onClick={clickMe}>My Button</Button>
        </div>
    );
};

export default Login;

Je veux cliquer sur mon bouton personnalisé et je veux imprimer le message de journal de la console lorsque je clique dessus. Mais j'obtiens l'erreur suivante. Comment résoudre ce problème ?

Argument of type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to parameter of type 'MouseEvent<HTMLButtonElement, MouseEvent<Element, MouseEvent>>'.
  Type 'MouseEvent' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persist  TS2345

    16 | }) => {
    17 |    const handleOnClick = (e: MouseEvent<HTMLButtonElement>) => {
  > 18 |        onClick(e);
       |                ^
    19 |    };
    20 |    return (
    21 |        <ButtonStyles onClick={handleOnClick} {...props}>

Answer 1

import * as React from "react";

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

/**
 * Button.
 *
 * @param {ButtonProps} props button's props
 * @returns {React.ReactElement<ButtonProps>} Button.
 */
export function Button(props: ButtonProps): React.ReactElement<ButtonProps> {
    const { children, ...rest } = props;
    return (
        <button
            {...rest}
        >
            {children}
        </button>
    );
}

Answer 2

Votre interface IButtonProps définit la signature attendue de onClick

    onClick?:
        | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
        | undefined;

Toutefois, le e argument pour handleClick est défini différemment comme MouseEvent<HTMLButtonElement>

Si vous modifiez la signature du onClick pour qu'elle corresponde à votre handleClick définition, cela peut contribuer à réparer le problème ?

    onClick?:
        | ((event: React.MouseEvent<HTMLButtonElement>) => void)
        | undefined;

Answer 3

// Button.tsx
import React from "react";
import styled from "styled-components";

interface IButtonProps {
    children?: React.ReactNode;
    props?: any;
    onClick?: any;
}

const MyButton: React.FC<IButtonProps> = ({ onClick, children, ...props }) => {
    return (
        <ButtonStyles {...props} onClick={onClick}>
            {children}
        </ButtonStyles>
    );
};

export default MyButton;

const ButtonStyles = styled.button``;

// Login.tsx
import React from "react";
import MyButton from "../../components/Generic/Button/Button";

const Login: React.FC = () => {
    const ClickMe = () => {
        console.log("Button Clicked");
    };

    return (
        <div>
            <MyButton onClick={ClickMe}>Hello MY Button</MyButton>
        </div>
    );
};

export default Login;

J'ai juste pu résoudre le problème en changeant le type de onClick?: any Ce n'est pas la meilleure solution, mais au moins il n'y a pas eu d'erreur et je peux exécuter l'action onClick dans mon Login.tsx.