返回匿名函数的回调函数在 onClick 上给出错误-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

P粉649990273 2024-04-02 16:37:57

[React讨论组]

436

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

P粉649990273

全部回复(2)

P粉5877801032024-04-03 14:56:23 2楼

handleClick 函数不需要任何类型的参数，但您向其传递一个字符串。

应该是：

import React from 'react'

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

  return 
}

赞 +0

添加回复

P粉3788901062024-04-03 13:21:28 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 
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>