React 传递函数作为 prop

Posted 2023-03-16

【中文标题】React 传递函数作为 prop

【英文标题】：React passing function as prop

【发布时间】：2021-05-11 10:20:16

【问题描述】：

我正在使用 typescript/react，并且我从基于类的组件 A 中获得了此功能：

    listUpdateFunction() 
        console.log("called update functions")
        this.setState( shouldUpdate: true );
    

我将其作为道具传递给另一个组件 B。并将其用作提交按钮。

<button type="submit" onClick=this.props.listUpdateFunction>Submit!</button>

我的 B 类道具接口是：

interface IProps 
    listUpdateFunction: Function;

我打算使用此函数在 A 类中调用 componentDidUpdate。但是我的代码无法编译为它所说的 B 类

(JSX 属性) React.DOMAttributes.onClick?: ((event: React.MouseEvent) => void) |未定义

我不明白，阅读此错误消息我认为该函数可能未定义，但我认为该接口会保证它不为空？

【参考方案1】：

尝试更新你的界面

interface IProps 
    listUpdateFunction: (event: React.MouseEvent<htmlButtonElement>) => void;