Question

我有以下父函数将函数设置为其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上调用。相反，只要页面加载就会调用该函数。我该如何解决这个问题？

Answer 1

在渲染中，您正在执行方法而不是传递对它的引用。请尝试以下方法：

render() {
    return (
        <Inputs />   
        <Bottom event={this.handleClick} /> 
    );
}

React-child调用父函数

1 个答案: