调用通过其 props 传递的函数

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={()&nbsp;=>&nbsp;this.props.returnSettings()}或者更简单onClick={this.props.returnSettings}

Answer 2

你注意到子组件中有一个 returnSettings 道具，像这样点击事件onClick = {()=>this.props.returnDashboard}