回调函数返回一个匿名函数，在onClick上给出错误

Question

import React from 'react'
export default function Test() {
const handleClick = () => (label: string) => {
console.log('label: ' + label)
}
return <button onClick={handleClick('red one')}>click me</button>
}

TypeScript编译器在抱怨我的代码，我做错了什么?

Type '(label: string) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.
Types of parameters 'label' and 'event' are incompatible.
Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'string'.ts(2322)
index.d.ts(1494, 9): The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'

Answer 1

正好相反，

应该是

(label: string) => (e: any) => {

不是

(e: any) => (label: string) => {

import React from 'react'
export default function Test() {
const handleClick = (label: string) => (e: any) => {
console.log('label: ' + label)
}
return <button onClick={handleClick('red one')}>click me</button>
}

Answer 2

handleClick函数不需要任何类型的参数，但是你传递给它一个字符串。

应该是:

import React from 'react'
export default function Test() {
const handleClick = (label: string) => () => {
console.log('label: ' + label)
}
return <button onClick={handleClick('red one')}>click me</button>
}