onclickハンドラがコンポーネント上で動作しません

Question

私のレイアウトコンポーネントでは、メニューを開くか閉じて強制的に切り替える2つの方法があります。トグルメソッドは魅力的ですが、ユーザーがヘッダー内の何かをクリックするとメニューが閉じられるようになります（メニューはページ間で開いたままになりません）。しかし、その部分は働きたいと思わないし、私は理由を伝えることができません。

は、ここに私のコードです：私は、コンソールログを追加しました

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

あなたの例ではすべて正しいようです。しかし、あなたは<Header />コンポーネントのonClickをどう扱うのですか？これはカスタムコンポーネントですが、おそらくそこにclickHandlerはありません。

以下

、あなたは（プレス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>