Question

我的App组件将事件处理程序作为Button Component的道具传递给

// App.js

  public handlePlay = () => {
    this.setState({ ****** })
  }

// render

<Button play={this.handlePlay} />

通过道具（即play）传递的事件处理程序的正确类型是什么？

// Button.js
interface ButtontProps {
  play: any //what is the correct type here?
}

export const Button: React.SFC<ButtontProps> = ({ play }) => (
  <button onClick={play}>Play</button>
)

我不想使用any，因为那样会使我无法为此类实例应用正确的类型。

Answer 1

最有可能是以下其中之一

(event: React.MouseEvent<HTMLElement>) => void
(event: React.MouseEvent<HTMLInputElement>) => void

您可以通过查看React输入over here来确认。

Answer 2

最简单的解决方案是使用MouseEventHandler作为类型参数的HTMLButtonElement类型：

interface ButtonProps {
  play: React.MouseEventHandler<HTMLButtonElement>
}

反应TypeScript事件处理程序道具的正确类型

2 个答案: