gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:25:56 25 4
gpt4 key购买 nike

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

但是出现错误 _this.props.onclk 不是一个函数。我已将函数与 this 绑定(bind),但仍然出现错误。

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 的函数,我在其中接收 Prop 并在子组件中收到错误

最佳答案

在您的 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

关于javascript - 当将函数传递给子 React 时,获取 this.props 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56733882/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com