调用通过其 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={() => this.props.returnSettings()}

或者更简单

onClick={this.props.returnSettings}

Answer 2

你注意到子组件中有一个 returnSettings 道具，像这样点击事件

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