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）

＆＃13;

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

＆＃13;

<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>

＆＃13;

onclick处理程序不在组件上工作

1 个答案: