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

1tu0hz3e 于 2023-04-05 发布在 React

关注(0)|答案(2)|浏览(134)

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

reactjs

来源：https://stackoverflow.com/questions/75935900/callback-function-returning-an-anonymous-function-giving-error-on-onclick

2条答案

按热度按时间

zbdgwd5y1#

正好相反
应该是

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

而不是
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-04-05

jpfvwuh42#

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

赞(0）回复(0）举报 2023-04-05

我来回答

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

2条答案

相关问题

热门标签

最新问答