将函数传递给子React时获取this.props不起作用

时间:2019-06-24 09:43:27

标签: javascript reactjs react-component

我想将一个函数从父(PendingRides)传递给子(ThirdSidebar)

但是出现错误 _this.props.onclk 不是一个函数。我已经将此函数绑定了,但是仍然出现错误。

class PendingRides extends React.Component {
          //Parent Class
constructor(props) {
    super(props);
    this.switchclk=this.switchclk.bind(this);
    this.state={
        clk:false
    }
}


switchclk = (status)=>{

    console.log("Here2");
    this.setState({clk:status})

};

render(){


    return(

        <div>
            <ThirdSidebar onclk={this.switchclk}/>  // passing function to child

            {this.state.clk ?
                <div>
                <div className="layout-content">
                    <div className="layout-content-body">
                    </div>
                </div>

                </div>
            :null}



        </div>

    )
}

}

class ThirdSidebar extends React.Component{

constructor(props){
    super(props);
    this.showRides=this.showRides.bind(this);
    this.state={

    }
}

showRides = (e)=>{

    e.preventDefault();
    console.log("Here1");
    this.props.onclk(true)

};

render(){

    let hreflink=null;

    return(
        <div>
                <div className="layout-main"> {/*---------------------- sidebar ----------------------- */}
                    <div className="layout-sidebar">
                        <div className="layout-sidebar-backdrop">
                        </div>
                        <div className="layout-sidebar-body">
                            <div className="custom-scrollbar">
                                <nav id="sidenav" className="sidenav-collapse collapse">

                                            <ul className="sidenav-subnav">
                                                <li className="sidenav-subheading">Dashboards</li>
                                                <li onClick={(e)=>this.showRides(e)} className="active"><a href={hreflink}>Pending Rides</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>

                </div> {/* sidebar ends */}

            </div>

        </div>
    )
}

}

导出默认的ThirdSidebar

当用户单击挂起的游乐设施时,它会调用showRides函数,在该函数中我会收到道具并在子组件中出现错误

2 个答案:

答案 0 :(得分:1)

在您的PendingRides组件中,您的switchclk函数应该是

switchclk(status){ //Remove arrow function

    console.log("Here2");
    this.setState({clk:status})

};

在您的ThirdSidebar组件中,您的showRides函数应该是

showRides(e){ //Remove arrow function

    e.preventDefault();
    console.log("Here1");
    this.props.onclk(true)

};

像这样调用上面的函数

<li onClick={this.showRides} className="active"><a href={hreflink}>Pending Rides</a></li>

注意: How to use arrow functions

Working Demo

答案 1 :(得分:0)

如果使用箭头功能,则不再需要绑定功能。 实际上,箭头功能等效于Route::domain(['example1.com', 'example2.com'])->group(...);

删除绑定线:

bind()

或使用以下命令更改箭头功能:

this.showRides = this.showRides.bind(this); // to remove