傳回匿名函數的回呼函數在 onClick 上給出錯誤
P粉649990273
P粉649990273 2024-04-02 16:37:57
0
2
493

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
P粉649990273

全部回覆(2)
P粉587780103

handleClick 函數不需要任何類型的參數,但您向其傳遞一個字串。

應該是:

import React from 'react'

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

  return 
}
P粉378890106

反之亦然

應該是

(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 
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板