在 React Typescript 中创建自定义按钮并添加 onClick 事件答案

【问题标题】：Creating a Custom Button in React Typescript and add onClick Event在 React Typescript 中创建自定义按钮并添加 onClick 事件
【发布时间】：2020-06-11 15:26:36
【问题描述】：

我正在尝试在使用 React Hooks 和 Styled 组件的 React Typescript 项目中创建自定义按钮组件。

// 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``;

这是我要使用我的自定义按钮的组件

// 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;

我想单击我的自定义按钮，并希望在单击它时打印控制台日志消息。但我收到以下错误。如何解决这个问题？

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}>

【问题讨论】：

我相信您的 clickMe 方法缺少事件参数。尝试将其更改为clickMe(e)。
@kaveh 我认为您的意思是：，但仍然出现错误。
不，我的意思是您实际创建clickMe 的位置，所以const clickMe = () => {...} 应该是const clickMe = (e) => {...}
不，效果不佳。

标签： reactjs typescript react-hooks

【解决方案1】：

更新：

如果你想包含它们 aria 道具

新


import React from "react";

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

export const ButtonPrimary:React.FC<ButtonProps> = props => {
    const {children, ...rest} = props;

    return (
        <button {...rest}>{children}</button>
    )
}

旧

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>
    );
}

【讨论】：

对我有用的部分是interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {

【解决方案2】：

您的接口IButtonProps 定义了onClick 的预期签名

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

但是，handleClick 的 e 参数与 MouseEvent<HTMLButtonElement> 的定义不同

如果您更改 onClick 签名以匹配您的 handleClick 定义，那可能会通过某种方式解决它？

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

【讨论】：

【解决方案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;

我只能通过更改 onClick?: any 的类型来解决问题。这不是最好的解决方案，但至少它没有抛出任何错误，我可以在我的 Login.tsx 中执行 onClick 操作。

【讨论】：