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

时间:2019-05-26 12:00:17

标签: javascript reactjs react-bootstrap

我目前是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]}。有人可以帮我吗?

2 个答案:

答案 0 :(得分:2)

您有错字

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

应该是

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

或更简单

onClick={this.props.returnSettings}

答案 1 :(得分:0)

您注意到子组件中有一个returnSettings道具, 确实点击事件

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