调用父函数

React- child to call parent function

本文关键字：函数 调用      更新时间：2023-09-26

我有下面的父函数设置一个函数作为它的prop…

class Index extends React.Component {
    constructor() {
        super();
        this.state = {header:"Welcome to TutorHub"}
    }
    handleClick(event)
    {
     console.log("link was clicked");
    }
    render(){
        return(
            <Inputs />   
            <Bottom event={this.handleClick()} /> 
        );
   }
}
export default Index;

现在我在我的子组件onClick…中调用这个函数

class Bottom extends React.Component {
    constructor(){
        super();
        this.state = {link:"Don't have an account?"}
    }
    render(){
        return (
            <div>
            <div className="sub-login">
                <p>{this.state.link}<a href="#" onClick={this.props.event}> Register here</a></p>
            </div>
            </div>
        );
    }
}
export default Bottom;

所以函数正在被调用，但它没有在onClick上被调用。相反，该函数会在页面加载后立即调用。我该如何解决这个问题?

在您的呈现中，您正在执行方法而不是传递对它的引用。试试下面的命令:

render() {
    return (
        <Inputs />   
        <Bottom event={this.handleClick} /> 
    );
}
相关文章：