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设置为该事件处理程序，那么我可以使其正常工作，但这似乎就是这样＃39我所看到的一切都是不必要的。

任何指导？谢谢！

Answer 1

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

Answer 2

使用组件时无需绑定this，只需在this组件中绑定<Hamburger />即可。请参阅以下示例代码

import React from 'react';
import Button from 'components/Button';

class App extends React.Component {
  handleClick(e){
    console.log(e.target);
  }

  render(){
    return (
      <Button Text="Save" onClick={this.handleClick} />
    );
  }
}

//Button Component
class Button extends React.Component {
  clickEventHandler(e) {
      this.props.onClick(e);
  }
  render(){
    return (
      <button onClick="this.clickEventHandler.bind(this)">{this.props.Text}</button>
    );
  }
}

Answer 3

由于您要导出ES6类而不使用createClass，因此必须将处理程序绑定到this：

<Hamburger onClick={this.onMenuChange.bind(this)} />

请参阅no autobinding上的React文档以了解原因：

方法遵循与常规ES6类相同的语义，这意味着它们不会自动将其绑定到实例。您必须明确使用.bind（this）或arrow functions =＆gt;。

此外，您的州有错误。 this.setState({ menuOpen: !this.menuOpen });会设置this.state.menuOpen，但由于您没有改变prop，因此此处永远不会改变：<HamburgerMenu menuOpen={this.menuOpen} />。

那一行应该是：

<HamburgerMenu menuOpen={this.state.menuOpen} />

// and you should set a default state as well

// in AppHandler
componentWillMount() {
  this.state = {
    menuOpen: this.props.menuOpen
  };
}

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

3 个答案: