javascript - onclick 处理程序不适用于组件

Question

在我的布局组件上，我有两种方法可以打开菜单或强制关闭菜单。切换方法就像一个魅力，但我希望菜单在用户单击标题内的任何内容时关闭(因此菜单不会从页面到页面保持打开状态)。然而，那部分似乎并不想工作，我也不知道为什么。

这是我的代码:

import React from 'react';
import Header from '../components/Header.jsx';
import Footer from '../components/Footer.jsx';

export default class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mobileMenuVisible: false
    }
  }

  handleNavClick() {
    // Check if the menu is visible and then toggle to the other state
    if(!this.state.mobileMenuVisible) {
      this.setState({mobileMenuVisible: true});
    } else {
      this.setState({mobileMenuVisible: false});
    }
  }

  forceCloseNav() {
    // Don't perform checks, just set the menu visibility to false
    this.setState({mobileMenuVisible: false});
  }

  render() {
    const { dispatch } = this.props;
    return(
      <div class={'main menu-open-'+ this.state.mobileMenuVisible} role="main">
        <span class="header-toggle" onClick={this.handleNavClick.bind(this)}><div><span>Menu</span></div></span>
                <Header onClick={this.forceCloseNav.bind(this)}/>
        <div class="wrapper">
            { this.props.children }
        </div>
        <Footer />
      </div>
    )
  }
}

我添加了控制台日志，我可以看到组件上的 onClick 处理程序根本没有触发。

Answer 1

在您的示例中，一切看起来都是正确的。但是，你能检查一下，你是如何处理 onClick 的吗？在你的<Header />成分？这是一个自定义组件，可能那里没有 clickHandlers。

在下面，您可以看到一个使用 html <header> 的工作示例(按run)

class Test extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      mobileMenuVisible: false,
    };
  }
  
  handleNavClick() {
     console.log('Nav open');
     this.setState({mobileMenuVisible: true});
  }
  
  forceCloseNav(event) {
    event.stopPropagation();
    console.log('Nav close');
    this.setState({mobileMenuVisible: false});
  }
  
  render() {
    const { dispatch } = this.props;
    return(
      <div class={'main menu-open-'+ this.state.mobileMenuVisible} role="main">
        <span class="header-toggle" onClick={this.handleNavClick.bind(this)}><div><span>Menu</span></div>             </span>
                <header onClick={this.forceCloseNav.bind(this)}>Header content</header>
                
   
        <div class="wrapper">
            { this.props.children }
         <hr />
         { this.state.mobileMenuVisible ? 'Menu Visible' : 'Menu Hidden'}
        </div>
        <footer />
      </div>
    )
  }
  
}

ReactDOM.render(<Test />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>