La fonction de rappel renvoyant une fonction anonyme donne une erreur sur 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>
}

Le compilateur TypeScript se plaint de mon code, qu'est-ce que je fais de mal ?

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

handleClick La fonction ne nécessite aucun type de paramètres, mais vous lui transmettez une chaîne.

devrait être :

import React from 'react'

export default function Test() {
  const handleClick = (label: string) => () => {
    console.log('label: ' + label)
  }

  return click me
}

Answer 2

Vice versa

devrait être

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

au lieu de

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

import React from 'react'

export default function Test() {
  const handleClick = (label: string) => (e: any) => {
    console.log('label: ' + label)
  }

  return click me
}