当函数传递给子进程时,React onClick事件不会触发

Question

我有一个非常简单的React组件,我将onClick事件的回调传递给子元素; 然而,onClick事件似乎并没有激发.该类在下面,HamburgerMenu并且Hamburger正确导入/呈现,这些组件上不存在任何事件.

export default class AppHandler extends React.Component {
  componentWillMount() {
    this.state = {
      menuOpen: false
    };
  }
  render() {
    return (
      <div>
        <HamburgerMenu menuOpen={this.state.menuOpen} />
        <div className="content">
          <nav>
            <Hamburger onClick={this.onMenuChange.bind(this)} />
          </nav>
        </div>
      </div>
    );
  }
  onMenuChange() {
    console.log('onMenuChanged');
    this.setState({ menuOpen: !this.menuOpen });
  }
};

我可以让它工作,如果在Hamburger组件中我onClick在根元素上设置另一个事件,然后设置this.props.onClick为该事件处理程序,但似乎从我看到的一切都没有必要.

任何指导？谢谢!

Answer 1

所以这最终让我无法理解onClick事件的附加位置.由于组件本身在设置onClick={this.onMenuChange(this)}时并不是真正的元素,因此我只prop.onClick为子元素设置Hamburger.为了真正获得绑定到工作,我就必须设置onClick={this.props.onClick}的根元素Hamburger组成.