reactjs - 嵌套函数返回意外结果
问题描述
我的标题组件中有一个菜单组件。标头组件将一个函数传递给菜单组件 => 默认菜单组件。它正在工作,但该函数返回不需要的数据。
我的函数经过的路径是:主页 => 标题 => 菜单 => defaultMenu
功能是:
changeBodyHandler = (newBody) => {
console.log(newBody)
this.setState({
body: newBody
})
}
我从 homepage => header 传递函数,如下所示:
<HeaderDiv headerMenuClick={() => this.changeBodyHandler}/>
然后通过 header => menu => defaultMenu 使用:
<Menu MenuClick={this.props.headerMenuClick} />
//==================== 组件代码 ========================== //
主页:
class Homepage extends Component {
constructor(props){
super(props);
this.state = {
body: "Homepage"
}
this.changeBodyHandler = this.changeBodyHandler.bind(this)
}
changeBodyHandler = (newBody) => {
console.log(newBody)
this.setState({
body: newBody
})
}
render() {
return (
<div>
<HeaderDiv headerMenuClick={() => this.changeBodyHandler}/>
{ this.state.body === "Homepage" ?
<HomepageBody />
: (<div> </div>)}
</div>
);
}
}
标题:
class HeaderDiv extends Component {
constructor(props) {
super(props);
this.state = {
showMenu: 'Default',
}
}
render(){
return (
<Menu MenuClick={this.props.headerMenuClick}/>
);
}
}
菜单:
import React, { Component } from 'react';
import DefaultMenu from './SubCompMenu/DefaultMenu';
import LoginCom from './SubCompMenu/LoginCom';
import SingupCom from './SubCompMenu/SingupCom';
class Menu extends Component {
//==================================================================
constructor(props){
super(props);
this.state = {
show: this.props.shows
};
this.getBackCancelLoginForm = this.getBackCancelLoginForm.bind(this);
}
//===============================================================
//getBackCancelLoginForm use to hindle click event singin & singup childs
//===============================================================
getBackCancelLoginForm(e){
console.log("Hi")
this.setState({
show : "Default"
})
}
//=================================================================
// getDerivedStateFromProps changes state show when props.shows changes
//===============================================================
componentWillReceiveProps(nextProps) {
if(this.props.show != this.nextProps){
this.setState({ show: nextProps.shows });
}
}
//======================================================================
render() {
return (
<div>
{ this.state.show === "Singin" ?
<LoginCom
cencelLogin={this.getBackCancelLoginForm.bind(this)}
/>
: (<div> </div>)}
{ this.state.show === "Singup" ?
<SingupCom
cencelLogin={this.getBackCancelLoginForm.bind(this)}
/>
: (<div> </div>)}
{ this.state.show === "Default" ?
<DefaultMenu MenuClicks={this.props.MenuClick}/> : (<div> </div>)}
</div>
);
}
}
默认菜单:
class DefaultMenu extends Component {
render() {
return (
<div className="box11" onClick={this.props.MenuClicks("Homepage")}>
<h3 className="boxh3" onClick={this.props.MenuClicks("Homepage")}>HOME</h3>
);
}
}
//================ 描述预期和实际结果。================//
我期望将字符串“主页”分配给我的状态“正文”
但console.log
显示:
Class {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: MouseEvent, type: "click", target: div.box11, …}
而不是“主页”
解决方案
在 onClick 监听器中使用箭头函数,在上面的问题中更改DefaultMenu
为:
class DefualtMenu extends Component {
render() {
return (
<div className="box11" onClick={() => this.props.MenuClicks("Homepage")}>
<h3 className="boxh3">HOME</h3>
</div>
);
} }
对于箭头函数,从Mozilla
箭头函数中学习我希望这会有所帮助。
推荐阅读
- android - 将数据放入 ExpandableListview
- php - 将结构为多维数组的字符串转换为数组
- python - XGBoost CV 函数如何确定使用哪个估计器或训练模型?
- r - 如何使用ggplot / R在boxplot的x轴上插入空格?
- html - 散景图未在 Flask 中显示
- angular - Angular 7 - 使用 *ngFor 显示数据的问题(数据未显示)
- scala - Scala 语法如 private[this]
- terraform - 如何使用 Terraform 的当前状态同时更新资源
- laravel - 在多对多连接中,我收到此错误:SQLSTATE [23000]:完整性约束违规:1452 无法添加或更新子行
- ios - 自动布局纵横比约束