将函数传递给孩子时反应onClick事件未触发[重复]答案

【问题标题】：React onClick event not firing when function is passed to child [duplicate]将函数传递给孩子时反应onClick事件未触发[重复]
【发布时间】：2015-09-18 01:19:37
【问题描述】：

我有一个非常简单的 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 设置为该事件处理程序，我可以让它工作，但从我所看到的一切看来，这似乎是不必要的。

有什么指导吗？谢谢！

【问题讨论】：

应该是this.onMenuChange.bind(this)，但是当你点击时你至少会得到一个控制台错误。您确定单击时绝对没有控制台错误？
我确实看到Hamburger 组件的onClick 确实绑定了一些东西，但它实际上仍然没有调用onMenuChange。所以它不会抛出错误，因为实际上绑定了一些东西，但是绑定的东西是不正确的。

标签： javascript reactjs ecmascript-6

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

方法遵循与常规 ES6 类相同的语义，这意味着它们不会自动将 this 绑定到实例。您必须明确使用 .bind(this) 或箭头函数 =>.

另外，您的状态有误。 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
  };
}

【讨论】：

感谢您对状态的更正，但即使将onClick 绑定到this，也永远不会调用onMenuChange 函数。我确实看到有一个函数实际上通过 React 开发工具对事件视而不见，但从未见过它被调用过。
@BenM，它被称为。阅读我的答案的第二部分。您需要使用menuOpen={this.state.menuOpen} 并改变状态。
我确实看到了关于错误设置状态的部分，但我正在使用 onMenuChange 事件登录到控制台并且没有输出。我更新了示例以包含更正，其中 onClick 仍然没有触发。

【解决方案3】：

你在使用组件的时候不需要绑定this，在你的<Hamburger />组件中绑定this就够了。请看下面的示例代码

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>
    );
  }
}

【讨论】：