React将函数作为prop传递

Question

我使用typescript/react，我有这个函数从一个基于类的组件a:

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

，我把它作为道具传递给另一个组件b，并使用它作为提交按钮。

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

类B的prop接口是:

interface IProps {
listUpdateFunction: Function;
}

我计划使用这个函数在类a中调用componentdiduupdate。然而，我的代码没有为类B编译，它说

(JSX属性)React.DOMAttributes.onClick?:((event: React.MouseEvent<HTMLButtonElement,>) =>Void) |未定义

我不明白，阅读这个错误信息，我认为函数可能是未定义的，但我认为接口会保证它不是空的?

Answer 1

尝试更新你的界面

interface IProps {
listUpdateFunction: (event: React.MouseEvent<HTMLButtonElement>) => void;
}