Question

我正在使用visual studio中的typescript开发一个小型Web应用程序。我有一个父组件和一个子组件，我想从子组件调用父组件的功能。我写了下面的代码，但似乎我做错了

Parent.tsx

export class Parent extends React.Component<RouteComponentProps<{}>, {}>{
constructor() {
    super()
    this.deleteFunction = this.deleteFunction.bind(this);
}

deleteFunction(){
console.log('delete called from parent');
}

public render() {
    return (
            <div>
                 <Child deleteFunction={this.deleteFunction.bind(this)} />
            </div>
   )
}

Child.tsx

class ChildProps{
deleteFunction: any;
}


export class Child extends React.Component<ChildProps, {}> {

constructor() {
    super();
    this.handledeletebutton = this.handledeletebutton.bind(this);
}

handledeletebutton(){
   e.preventDefault();
   console.log('delete called from child');
   this.props.deleteFunction;
}

render(
    <div>
        < a href='#' onClick={this.handledeletebutton}>Delete</a>
   </div>
)
}

我可以在我的控制台中看到孩子的日志，但我看不到父母的日志。它似乎与.jsx文件一起工作，但我不知道为什么它不是打字稿。此外，我在控制台中看不到任何错误。我对打字稿很新，所以也许我犯了一个愚蠢的错误。任何人都可以帮助我。

Answer 1

非常简单。我只需要使用正确的语法。由于deleteFunction是一个函数，我必须在我的子组件中使用deleteFunction（）。所以handledeletebutton（）将如下

handledeletebutton(){
    e.preventDefault();
    console.log('delete called from child');
    this.props.deleteFunction();<= Use as a function
 }

在reactjs typescript

1 个答案: