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

React onClick event not firing when function is passed to child

本文关键字：onClick React 事件 函数 子函数      更新时间：2023-09-26

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

指导吗?谢谢你！

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

由于您正在导出ES6类而不使用createClass，您必须将处理程序绑定到this:

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

请参阅React文档关于不自动绑定到ready的原因:

方法遵循与常规ES6类相同的语义，这意味着它们不会自动将其绑定到实例。您必须显式地使用.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
  };
}

在使用组件时不需要绑定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>
    );
  }
}
相关文章：