reactjs React TypeScript|事件处理程序属性的正确类型

insrf1ej  于 2023-04-11  发布在  React
关注(0)|答案(2)|浏览(142)

My App组件将事件处理程序作为prop向下传递给Button Component

// App.js

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

<Button play={this.handlePlay} />

通过prop传递的事件处理函数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,因为这会使我无法为这样的示例应用正确的类型。

xmq68pz9

xmq68pz91#

它很可能是以下任一项

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

你可以通过查看这里的React类型来确认这一点。

6l7fqoea

6l7fqoea2#

最简单的解决方案是使用MouseEventHandler类型,并将HTMLButtonElement作为类型参数:

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

相关问题