嵌套函数返回意外结果

Question

我的标题组件中有一个菜单组件。标头组件将函数传递给菜单组件=>默认菜单组件。它正在工作，但该函数返回不需要的数据。

我的函数所经过的路径是：homepage => header => menu => 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>

    );
  }
}

// ================描述预期和实际结果。 ===== //

我期待将字符串“Homepage”分配给我的状态“body”

但console.log显示：

Class {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: MouseEvent, type: "click", target: div.box11, …}

而不是“主页”

Answer 1

在onClick侦听器中使用箭头函数，在上面的问题中将DefaultMenu更改为：

class DefualtMenu extends Component {
    render() {
      return (
            <div className="box11" onClick={() => this.props.MenuClicks("Homepage")}>
              <h3 className="boxh3">HOME</h3>
            </div>
      );
    } }

对于箭头函数，请从mozilla Arrow Functions学习 我希望这有帮助。