类型“MouseEvent<HTMLButtonElement, MouseEvent>”不可分配给类型“MouseEventHandler<HTMLButtonElement>”

Question

TS新手来了 我在我的 'handleClick' 属性上收到此错误<TailwindButton />：

类型“(e: React.MouseEventHandler) => void”不可分配给类型“MouseEventHandler”。参数“e”和“event”的类型不兼容。类型“MouseEvent<HTMLButtonElement, MouseEvent>”不可分配给类型“MouseEventHandler”。类型“MouseEvent<HTMLButtonElement, MouseEvent>”与签名“(event: MouseEvent<HTMLButtonElement, MouseEvent>): void”不匹配

我正在使用 VSCode，并将鼠标悬停在 onClick 上以获得正确的类型，但我仍然收到错误。我已经尝试使用<Element>而不是按照此处<HTMLButtonElement>建议的类型，但仍然收到错误。请帮忙

TailwindButton.tsx：

import React from 'react'

interface TailwindButtonProps {
    icon: string;
    text: string;
    handleClick: React.MouseEventHandler<HTMLButtonElement>
}

const TailwindButton: React.FC<TailwindButtonProps> = ({ icon, text, handleClick }) => {
    return (
        <button className='bg-primary rounded text-white flex items-center justify-between h-full w-full
            p-2
        '
            type="submit"
            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)} 
        >
            <p>{text}</p>
            <p>
                <img src={icon} alt="forward_icon" />
            </p>
        </button>
    )
}

export default TailwindButton

SignUpForm.tsx：

import React, { useState } from 'react'
import profileIcon from '../images/icons/profile.svg'
import forwardIcon from '../images/icons/forward.svg'
import TailwindInput from './TailwindInput'
import TailwindButton from './TailwindButton'

const SignUpForm: React.FC = () => {
    const [values, setValues] = useState<{ username: string; password: string }>({
        username: '',
        password: ''
    })

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValues(prev => ({
            ...prev,
            [e.target.name]: e.target.value
        }))

    }

    const handleClick = (e: React.MouseEventHandler<HTMLButtonElement>) => {

    }
    return (
        <form>
            <div>
                <TailwindInput
                    startIcon={profileIcon}
                    endIcon=""
                    placeholder="Username"
                    type="text"
                    value={values.username}
                    name="username"
                    onChange={(e) => handleChange(e)}
                />
            </div>

            <div className='flex justify-end'>
                <p className='h-10 w-1/2 md:w-1/3'>
                    <TailwindButton
                        icon={forwardIcon}
                        text="Next"
                        
                        handleClick={(e: React.MouseEventHandler<HTMLButtonElement>) => handleClick(e)} //error is here
                    />
                </p>
            </div>
        </form>
    )
}

export default SignUpForm

Answer 1

尝试对事件类型进行以下更改onClick：

 onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)}

完整代码：

 onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)}