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

【问题标题】：How to pass a handler to onClick with Typescript and material UI如何使用 Typescript 和 Material UI 将处理程序传递给 onClick
【发布时间】：2017-05-19 14:29:29
【问题描述】：

我想将一个返回另一个函数的函数传递给 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，这对我没有帮助。我需要传递一个包含数据的对象。有谁知道如何设置一个返回函数的函数，或者 onTouchTap 的处理程序或使用 typescript 做出反应的 onClick 事件？

【问题讨论】：

标签： javascript reactjs typescript material-ui

【解决方案1】：

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

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

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

【讨论】：

请注意，如果您在 render() 中定义函数，则每次重新渲染组件时都会重新创建它。很多时候这不是问题，但如果一个组件经常重新渲染，它可能会导致性能问题。如果遇到此问题，请将函数定义为类属性（例如 this.onTouchTap = () => onObjectClick(object)，然后是 onTouchTap={this.onTouchTap}）
@JoeClay 我不知道，感谢您的意见。
没问题 :) docs page on handling events 的底部提到了它，但它太简短了，我想大多数人都会错过它。