调用通过其道具传递的函数

Question

我目前是React Bootstrap的新手，有一个我无法解决的问题。

我想通过将其作为道具传递给孩子来设定我的父母的状态。 调用该函数似乎已执行，但状态未设置。我不知道为什么这样做。

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state={
            component : ""
        }

        this.returnDashboard = this.returnDashboard.bind(this);
    }


    returnDashboard=()=>{
        console.log("i am executed")
        this.setState({component : <Dashboard />})
    }

    render(){           
        return (
            <Child returnDashboard={this.returnDashboard}/>
        );
    }
};


class Child extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
         return(
                <button onClick={()={this.props.returnSettings()}}>foo</button>
            );
    }
}

当按下按钮时，控制台将记录“我已执行”，并且：ƒ（）{[native code]}。 有人可以帮我吗？

Answer 1

你有错字

onClick={()={this.props.returnSettings()}}

应该

onClick={() => this.props.returnSettings()}

甚至更简单

onClick={this.props.returnSettings}

Answer 2

您注意到子组件中有一个returnSettings道具，请执行以下click事件

onClick = {（）=> this.props.returnDashboard}