如何使用 Typescript 和 material UI 将处理程序传递给 onClick

Question

我想将 returns 另一个函数传递给 material UI 的 onTouchTap 事件：

<IconButton
   onTouchTap={onObjectClick(object)}
   style={iconButtonStyle} >
      <img alt={customer.name} className="object-img" src={object.avatarSrc} />
</IconButton>

但我一直运行进入以下错误：

Type '{ onTouchTap: Function; style: CSSProperties; tooltip: string; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<IconButton> & Readonly<{ children?: ReactNode; }> ...'.

如果我只传递一个函数，点击事件就会被触发，一切正常：

<IconButton
       onTouchTap={onObjectClick}
       style={iconButtonStyle} >
          <img alt={customer.name} className="object-img" src={object.avatarSrc} />
    </IconButton>

但是，该函数运行时传递了 event，这对我没有帮助。我需要传递一个包含数据的对象。有谁知道如何设置一个函数 returns 一个函数，或者一个处理程序到 onTouchTap 或一个 onClick 事件以使用打字稿做出反应？

Answer 1

要将参数传递给 onTouchTap，您需要传递一个箭头函数并使用所需的参数调用该函数，如下所示：

<IconButton
   onTouchTap={() => onObjectClick(object)}
   style={iconButtonStyle} >
      <img alt={customer.name} className="object-img" src={object.avatarSrc} />
</IconButton>

这是因为 onTouchTap 和其他类似的属性采用函数 object，而不是函数 call .通过这样做，您将传递一个匿名函数（箭头函数），该函数使用所需的参数调用您的函数。

如何使用 Typescript 和 material UI 将处理程序传递给 onClick

How to pass a handler to onClick with Typescript and material UI

javascript

typescript

reactjs

material-ui